jqueryを使ったオートコンプリートとツールチップ

Question

このようにオートコンプリートとツールチップを表示するにはどうすればいいですか？

ありがとうございます。

Answer 1

これは、いくつかのCSS機能を持つだけで

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

です。あなたは基本的にそれはホバーjqueryので

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

と（この例では、結合だ、彼らは

編集

fは、このようなUIのL &を作成するために追加のスタイルの種類を確認するためにChrome > Inspectorを使用することができますwowhead.com）彼らはオートコンプリート部門の一部であるリンクを呼び出します

<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> 

は、データが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>' 
}); 

である返され、それらはdivの中に表示され、マウスポインタの位置

に対する相対位置i」​​はdidnの：

とjQueryは、このようなURLに.ajax()呼び出しを行いますtは正確なコードを抽出しましたが、可能です。.jsファイルのみが圧縮され、難読化されません。

Answer 2

"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/

あなたはjqueryの-UIから "ツールチップ" を（それはバージョン1.9で追加されました）を使用して、インターネット上の他の例を見つけることができます。