Как показать всплывающую подсказку с меню выбора пользовательского интерфейса jQuery для каждого параметра?

Когда я навожу курсор на параметры в selectmenu, я хочу показать пользовательскую всплывающую подсказку. Могу показать для обычных кнопок. Пример:

<button id="helpbutton1" title="text in title">Help</button>

$( "#helpbutton1" )
    .button({
        })  
    .tooltip({ 
        content: returnHelpbutton1Content()                     
    });

Но я не могу заставить его работать с selectmenu. Когда я навожу курсор на различные параметры в меню, я хочу видеть всплывающую подсказку для каждого параметра. Пример:

<label for="SelectMenu">Selectmenu example:</label>
    <select name="SelectMenu" id="SelectMenu">
        <option id="option1" title="Tooltip1">option1</option>
        <option id="option2" title="Tooltip2">option2</option>
    </select>

$( "#SelectMenu" ).selectmenu({ 
            width : 100,
            select: function( event, data ) {                   
                console.log("data.item.value: " + this.value);  
            }               
        });

$( "#option1" ).tooltip({ 
    content: returnTooltip1()                   
    });

$( "#option2" ).tooltip({ 
    content: returnTooltip2()                   
    });

Я использую jqueryUI 1.11.0. Как я могу заставить это работать?


jquery tooltip jquery-ui jquery-ui-tooltip jquery-ui-selectmenu
person user2099057    schedule 23.07.2014    source источник

Ответы (2)


arrow_upward
4
arrow_downward

DEMO всплывающей подсказки пользовательского интерфейса jquery в меню выбора jquery-ui.

JS-код:

 $(function() {
 var select_id = "speed";
 $( "#"+select_id ).selectmenu({
     open: function( event, ui ) {
         $('li.ui-menu-item').tooltip({
             items:'li',
             //content: "adsdads ad asdadad asd ad adoption"
             content:function(){
                 //console.log($(this).html());
                 return ($(this).html());
             }
         });
     }
 });

 $( "#"+select_id+"-button").tooltip({items: "span", content: 'This is select'});
person Rahul Gupta    schedule 24.07.2014
comment
Этот пример дает вам всплывающую подсказку для всего меню выбора. Можно ли показать по одному для каждой опции, если открыто меню выбора? Итак, всплывающая подсказка для Slower, еще одна для Slow, ... - person user2099057; 24.07.2014
comment
Я отредактировал свой код и демо. Теперь он также отображает всплывающую подсказку для каждой опции !! Проверьте это! - person Rahul Gupta; 24.07.2014
comment
Спасибо! Это именно то, что я искал! - person user2099057; 24.07.2014
comment
В этом примере применяются всплывающие подсказки для ВСЕХ меню выбора на странице! Если у вас есть более одного меню выбора jQueryUI, оно будет применяться ко всем из них. - person Itaypk; 10.11.2015

arrow_upward
0
arrow_downward

Решение Рахула применяется ко всем меню выбора на странице. Вот более простое решение, которое не привязывается к событию «открыть» и может применяться к любому конкретному меню выбора (при условии, что этот объект существует и уже был инициализирован как меню выбора):

$('#myselectbox').selectmenu( "menuWidget" ).tooltip({
    items:'li',
    content: function() {
        return ($(this).html());
    }
});
person Itaypk    schedule 10.11.2015