它只是
http://docs.jquery.com/Plugins/autocomplete
以及一些 CSS 功能。您可以使用 Chrome > Inspector 来查看他们添加了什么样的样式来创建这样的 UI l&f
Edit
基本上它是 jquery 中的悬停绑定
$("li").hover(fn);< /code>
在这个例子中（wowhead.com）他们调用一个链接，它是自动完成 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>
，jquery 对 url 进行 .ajax() 调用，如下所示： /item=19003&power
.ajax()
/item=19003&power
返回的数据采用 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">"The head of the Black Dragonflight\'s Brood Mother"</span></td></tr></table>' });
，它们显示在 div 中，相对于鼠标指针位置定位，
我没有提取确切的代码，但有可能，它们的 .js 文件仅被压缩，不被混淆
.js
It's just
with some CSS features. You can use Chrome > Inspector to see what kind of styles they added to create such UI l&f
Chrome > Inspector
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
and jquery does an .ajax() call to url like this: /item=19003&power
returned data are in json
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
您可以使用“title”属性：
$(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/
您可以找到其他示例在 Internet 上使用 jquery-ui 中的“工具提示”（在版本 1.9 中添加）。
You can use the "title" attribute:
You can find others examples on Internet using the "tooltip" from jquery-ui (that was added in version 1.9).
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
暂无简介
文章 0 评论 0
接受
发布评论
评论（2）
它只是
http://docs.jquery.com/Plugins/autocomplete
以及一些 CSS 功能。您可以使用 Chrome > Inspector 来查看他们添加了什么样的样式来创建这样的 UI l&f
Edit
基本上它是 jquery 中的悬停绑定
$("li").hover(fn);< /code>在这个例子中（wowhead.com）他们调用一个链接，它是自动完成 div 的一部分
，jquery 对 url 进行
.ajax()调用，如下所示：/item=19003&power返回的数据采用 json 格式
，它们显示在 div 中，相对于鼠标指针位置定位，
我没有提取确切的代码，但有可能，它们的
.js文件仅被压缩，不被混淆It's just
http://docs.jquery.com/Plugins/autocomplete
with some CSS features. You can use
Chrome > Inspectorto see what kind of styles they added to create such UI l&fEdit
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
and jquery does an
.ajax()call to url like this:/item=19003&powerreturned data are in json
and they are displayed in div, positioned relative to mouse pointer position
i didn't extracted exact code, but it is possible, their
.jsfiles are only compressed, not obfuscated您可以使用“title”属性：
https://jsfiddle.net/m02suadf/
您可以找到其他示例在 Internet 上使用 jquery-ui 中的“工具提示”（在版本 1.9 中添加）。
You can use the "title" attribute:
https://jsfiddle.net/m02suadf/
You can find others examples on Internet using the "tooltip" from jquery-ui (that was added in version 1.9).