Tooltip for dropdown list item

[mallepaddiParticipant]

Hi

There are many Drop down list boxes appearing on a page and some of them are disabled with selected value.

Is it possible to implement “tooltip” for drop downs showing text of selected item whether it was enabled or disabled ?

Thanks

[mallepaddiParticipant]

Hi

Data populating into dropdown boxes are coming from backend.

Thanks

[Peter StoevKeymaster]

Hi mallepaddi,

You can use jqxTooltip for displaying tooltip for any HTML Element on your web page. Example: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxtooltip/index.htm

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[mallepaddiParticipant]

HI

Please help, on how to integrate it for dropdown ?

Which event should use ?

Thanks

[Peter StoevKeymaster]

Hi mallepaddi,

It does not matter whether it is DropDownList or a simple DIV tag. It works the same way. The example which I pointed out, shows how to attach a Tooltip to HTML Element. The same approach is valid for the DropDownList.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[mallepaddiParticipant]

HI

Following code doesn’t work … please advice

renderer: function (index, label, value) {
$(“#listitem”+index+”innerListBoxcomboBoxSoldTo”).jqxTooltip({ content: ‘<b>’+value+'</b>’, position: ‘mouse’, name: ‘tooltip’});
}

Thanks

[Peter StoevKeymaster]

Hi mallepaddi,

You have to add a Tooltip to the DropDownList, not to its Items. From “Is it possible to implement “tooltip” for drop downs showing text of selected item”, I understand that you want a tooltip for the selected item which is displayed when the DropDownList is closed. Well, you should add a Tooltip to the DropDownList.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[mallepaddiParticipant]

Hi

Anything wrong here ..

$(“#comboBoxXYZ”).jqxDropDownList( { …….. });

$(“#comboBoxXYZ”).jqxTooltip({ content: $(‘#comboBoxXYZ’).val(), position: ‘mouse’, name: ‘tooltip’});

Thanks

[mallepaddiParticipant]

Hi

it works on ‘change’ event, great help.

Thanks

[mallepaddiParticipant]

Hi

How come .. below code displays tooltip of selected item but, calling $(‘#comboBox’).val() returning ”, but it returns exact selected value if i comment below tooltip code/

$(“#comboBox”).on(‘change’, function (event) {
$(“#comboBox”).jqxTooltip({ content: item.label, position: ‘mouse’, name: ‘tooltip’});
}

Any help ?

Thanks

[Peter StoevKeymaster]

In your code you use item.label, but item is undefined.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[mallepaddiParticipant]

HI

This is actual code ..

$(“#comboBox”).on(‘change’, function (event) {
var item = event.args.item;
if (item) {
$(“#comboBox”).jqxTooltip({ content: item.label, position: ‘mouse’, name: ‘tooltip’});
}
});

Thanks

[Peter StoevKeymaster]

Hi,

I don’t understand your problem. item.label returns the label and that works correctly. The Tooltip will display the selected item’s text. Isn’t that what you want? If you want to display the selected value instead of the text, then use item.value instead of item.label.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[mallepaddiParticipant]

Hi,

Let me explain clearly.

Having a dropdown and we are using user selected entry to save into database and same time we need to show “tooltip” for longer text labels.

There are two different functionalists for dropdown .. 1) have to show toopltip for selecte entry and second we need dropdown selected entry for some purpose in backend.

If no tooltip code, we are able to get value of dropdown .. like $(‘#box’).val(), but when we placed tooltip code, tooltip appearing but val()method returning NULL.

Hope you understand, problem is not with displaying tooltip, we get NULL when tooptip code in place.

Thanks

Thanks

[Peter StoevKeymaster]

Hi,

If you wish, provide a JSFiddle, which demonstrates your scenario.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts