Struts2：selectタグのドロップダウンオプションごとにツールチップを表示する方法は？

Question

私はこのstruts2 selectタグを持っています。オプションはItemオブジェクトのリストです。 Item Java Beanクラスに次の3つのプロパティがあるとします：itemId, itemLabel, itemDescription。

<s:select headerKey="" 
    headerValue="Select Item" 
    list="myModel.itemsList" 
    listKey="itemId" 
    listValue="itemLabel" 
    name="selectedItem" /> 

私はドロップダウンメニューの各オプションのツールチップを表示したいと思いいつでもそのオプションを介してユーザhoovers：私のselectタグが見え

はこれが好き。そのツールチップを埋め込むテキストは、My Java BeanクラスのitemDescriptionプロパティに格納されます

私は選択タグに余裕を持たせることができますが、それぞれのオプション/項目には異なる説明があるため、 。

現在、私はカスタムjavascriptのツールチップを持っており、可能であればこの機能を使用したいと考えています。これは、項目が表に記載されていることになるならば、私は機能を使用する方法である：

<td> 
    <span class="tooltip" onmouseout="tooltip.hide();" 
     onmouseover="tooltip.show('<s:property value="item.description" />');"> 
     <s:property value="item.label" /> 
    </span> 
</td> 

は、誰もがツールチップ毎回ユーザがオプションの上に置いたとしてdescriptionを表示するための最良の解決策になるか知っていますか？

Answer 1

あなたが望むことを実行するにはいくつかの方法があります。私のための最速はちょうどHTML書くことになります上記

<select name="selectedItem"> 
     <s:iterator value="collectionOfSomething"> 
      <option value="<s:property value="valueToReturn"/>" title="<s:property value="toolTip"/>"> 
       <s:property value="itemInListToShow"/> 
      </option> 
     </s:iterator> 
    </select> 

をHTML5のtitle属性を使用して、このことについての素晴らしい事は、あなたがどんなjavascriptをせずに、最新のブラウザでツールチップを得ることです。

置き換え：「valueToReturn」、「ツールチップ」と「itemInListToShow」「collectionOfSomething」内の値の適切なOGNL式で

jQueryの（任意のJSライブラリを行うだろう）となりこれを解決する別の方法をして行くだろうこのようなもの。

1）ツールヒントが付いているページにHTMLリストを貼り付けますが、CSSで表示されるようにスタイルが設定されています。

2）jQuery（またはJSライブラリのプリファレンス）を使用して、ドロップダウンリストの各項目にマウスオーバーすると、隠しリスト内の同じインデックスのツールヒントが表示されます。それは容易

onmouseoverbuttonイベントをUIに次の関数を呼び出し

関数addTitleAttributes（値）値が渡さ{

$("#"+value+" option").each(function() 
{ 
     $(this).attr('title',$(this).text()); 
}); 

}

缶を解決することができるのjQueryを使用

Answer 2

私はあなたにもヒントを使用することをお勧めします。http://onehackoranother.com/projects/jquery/tipsy/は私が見つけた最高の解決策です。私もそれを使用しています。

このスパンの間、あなたの選択を入れ、.jsファイルや.cssファイル

<link rel="stylesheet" href="${pageContext.request.contextPath}/resources/css/tipsy.css" type="text/css" /> 
    <link rel="stylesheet" href="${pageContext.request.contextPath}/resources/css/tipsy-docs.css" type="text/css" /> 
<script type="text/javascript" src="${pageContext.request.contextPath}/resources/scripts/jquery.tipsy.js"></script> 

<script type='text/javascript'> 
    $(function() { 
    $('.example-1').tipsy(); 
    $('.north').tipsy({gravity: 'n', html: true }); 
    $('.south').tipsy({gravity: 's', html: true }); 
    $('.east').tipsy({gravity: 'e', html: true }); 
    $('.west').tipsy({gravity: 'w', html: true }); 
    $('.auto-gravity').tipsy({gravity: $.fn.tipsy.autoNS, html: true}); 
    $('.example-fade').tipsy({fade: true, html: true}); 
    $('.example-custom-attribute').tipsy({title: 'id', html: true}); 
    $('.example-callback').tipsy({title: function() { return this.getAttribute('original-title').toUpperCase(); } }); 
    $('.example-fallback').tipsy({fallback: "Where's my tooltip yo'?" }); 
    $('.example-html').tipsy({html: true }); 
}); 
</script> 

そして最後にパスを宣言します。

<span class="south" style="cursor: pointer;" title=Your title"></span> 

このスパンでのクラス属性は、ツールチップの位置合わせのためにあります、非常に奇妙ですが、それは逆に働きます。それほど大きな問題はありません。もしそれを北に整列させる必要があれば、南に書きます。

Answer 3

選択ボタンのIDにする