Struts2: как показать всплывающую подсказку для каждого раскрывающегося списка в теге select?

Question

У меня есть этот Struts2 выбор тега, где опции - это список объектов Item.Допустим, класс Java-бина Item имеет следующие 3 свойства: itemId, itemLabel, itemDescription.

Мой тег выбора выглядит следующим образом:

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

Я хотел бы показать всплывающую подсказку для каждого параметра враскрывающееся меню всякий раз, когда пользователь наводит курсор на эту опцию.Текст для заполнения этой всплывающей подсказки хранится в свойстве itemDescription моего класса Java-бина

. Я знаю, что вы можете дать всплывающую подсказку тегу select, но это не то, что мне нужно, так как каждый параметр / элементимеет другое описание.

В настоящее время у меня есть пользовательская подсказка 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, хорошо то, что вы получаете всплывающую подсказку в большинстве современных браузеров без какого-либо JavaScript.

Замените: "valueToReturn", "toolTip" и "itemInListToShow" соответствующими выражениями ognl для значений в collectionOfSomething

Другой способ решения этой проблемы - использование jQuery (любая библиотека JS сделает) и будет выглядеть примерно так.

1) Поместите HTML-список на страницу с подсказками, но в стиле CSS, чтобы он не отображался.

2) Используйте jQuery (или JSбиблиотека предпочтений) для привязки события мыши к каждому элементу в раскрывающемся списке, в котором будет отображаться подсказка из того же индекса в скрытом списке.

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>

Атрибут class в этом диапазоне для выравнивания всплывающей подсказки, очень странно, но работает в обратном порядке. Нет такой большой проблемы, если вам нужно выровнять его по северу, просто напишите на юг.

Answer 3

Используя jQuery, это можно легко решить

Вызовите следующую функцию в пользовательском интерфейсе при событии onmouseoverbutton

функция addTitleAttributes (значение) {

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

}

Где переданное значение может быть идентификатором кнопки выбора