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

내가 드롭 다운 메뉴의 각 옵션에 대한 툴팁을 보여 드리고자 때마다 해당 옵션을 통해 사용자 후버 : 내 선택 태그가 보이는

이 좋아. 해당 툴팁을 채울 텍스트가 My Java Bean 클래스의 itemDescription 속성에 저장됩니다.

선택 태그에 너무 많은 정보를 제공 할 수 있지만 각 옵션/항목마다 다른 설명이 있기 때문에 필요한 것은 아닙니다. .

현재 맞춤 자바 스크립트 툴팁이 있으며 가능하면이 기능을 사용하고 싶습니다. 이 항목이 테이블에 나열한다면 나는 기능을 사용하는 방법입니다

<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 제목 속성을 사용, 이것에 대해 좋은 점은 당신이 어떤 자바 스크립트없이 가장 현대적인 브라우저에서 툴팁을 얻을 수 있다는 것입니다.

교체 "valueToReturn", "tooltip의"와 "itemInListToShow" "collectionOfSomething"의 값에 대한 적절한 OGNL 표현식으로

jQuery를 (모든 JS 라이브러리를 할 것)을 것이를 해결하는 또 다른 방법을하고 갈 것 이 같은.

1) 도구 팁이 있지만 CSS로 표시되는 HTML 목록을 페이지에 표시하여 보이지 않게하십시오.

2) jQuery (또는 JS 기본 설정 라이브러리)를 사용하여 이벤트 위에 마우스를 놓은 상태에서 드롭 다운 목록의 각 항목에 바인딩하면 숨겨진 목록의 동일한 색인에있는 도구 설명이 표시됩니다.

Answer 2

내가 조언 한 바에 따르면 http://onehackoranother.com/projects/jquery/tipsy/은 내가 찾은 최고의 솔루션이며 나도 사용하고 있습니다.

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

이 범위에서 클래스의 속성은 툴팁 정렬입니다 :

이 기간 사이에 선택을 넣어 된 .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> 

그리고 마지막 선언 , 매우 이상하지만 반전됩니다. 그런 큰 문제는 없습니다. 북쪽으로 정렬해야한다면 남쪽으로 작성하십시오.

Answer 3

쉽게 해결 될 수

통화 onmouseoverbutton 이벤트

함수 addTitleAttributes (값) {

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

}의 UI의 다음 함수를 jQuery를 사용하여 값을 전달

수 이드의 선택 버튼