Autocomplete and tooltip with jquery [closed]

问题

How to display the autocomplete and tooltip like this?

Thanks all.

回答1:

It's just

http://docs.jquery.com/Plugins/autocomplete

with some CSS features. You can use Chrome > Inspector to see what kind of styles they added to create such UI l&f

Edit

Basically it's hover binding in jquery

$("li").hover(fn);

and in this example (wowhead.com) they call a link which is part of autocomplete div

<div class="live-search-icon" style="background-image: 
url(http://static.wowhead.com/images/wow/icons/small/inv_misc_head_dragon_black.jpg); ">
    <div>
       <a href="/item=19003" class=" q4">
        <i>Item</i>
        <span>Head of Nefarian</span>
       </a>
    </div>
</div>

and jquery does an .ajax() call to url like this: /item=19003&power

returned data are in json

$WowheadPower.registerItem('18422', 0, {
name_enus: 'Head of Onyxia',
quality: 4,
icon: 'INV_Misc_Head_Dragon_01',
tooltip_enus: '<table><tr><td><b class="q4">Head of Onyxia</b><br /><!--bo-->Binds when picked up<br />Unique<br /><a href="/quest=7490" class="q1">This Item Begins a Quest</a><br />Requires Level 60<br />Item Level 60</td></tr></table><table><tr><td><span class="q">&quot;The head of the Black Dragonflight\'s Brood Mother&quot;</span></td></tr></table>'
});

and they are displayed in div, positioned relative to mouse pointer position

i didn't extracted exact code, but it is possible, their .js files are only compressed, not obfuscated

回答2:

You can use the "title" attribute:

    $(function() {
        //field desc -> is the "tooltip"
        var availableTags = [
            { label: "Choice1", value: "value1", desc: "descricao 1" },
            { label: "Choice2", value: "value2", desc: "descricao 2 bla bla bla" },
            { label: "Choice3", value: "value3", desc: "descricao 3 ble" },
            { label: "Choice4", value: "value4", desc: "descricao 4 bli bli bli" }
        ];
        $( "#tags" ).autocomplete({
            source: availableTags,
            focus: function( event, ui ) {
                $(".ui-autocomplete > li").attr("title", ui.item.desc);
            }
        });
    });

https://jsfiddle.net/m02suadf/

You can find others examples on Internet using the "tooltip" from jquery-ui (that was added in version 1.9).

来源：https://stackoverflow.com/questions/6661927/autocomplete-and-tooltip-with-jquery

标签

javascript

jquery

jquery-autocomplete