Tooltip For Dropdown

What Is Tool Tip

The tooltip or infotip or a hint is a common graphical user interface element. It is used in conjunction with a cursor, usually a pointer. The user hovers the pointer over an item, without clicking it, and a tooltip may appear—a small “hover box” with information about the item being hovered over. Tooltips don’t appear on mobile operating system, since there is no cursor.jQuery Tooltip For Dropdown display hit for each option you selected.

How tooltip works.

In html tooltip works on the “title” attribute of the elements.
eg:

After that you can use css or jquery that how it looks like.

lets talk about dropdownlist tooltip.In this post how to use “what is this” tooltip for dropdown or select box items.

Here is the the snapshot of our jquery dropdown tooltip and how it looks like.
tooltip for selectboxit shows unique description of option you selected from dropdown.
hope this is html option tooltip exactly what you want .

it works on jquery, jquery tiptip plugin and some css code.tiptip plugin need some tweak to do so.
here is the tweak code for select option.

[js]

jQuery(document).ready(function($) {
$(‘.someClass’).tipTip({maxWidth: 300, edgeOffset: 10,keepAlive: true });

$(“select”).change(function () {
var str = “”;
$(“select option:selected”).each(function (i) {

str += this.title ;

});
})
.trigger(‘change’);

});

[/js]

Don’t get nervous with the code.below is the live demo and download link of this.

Live Demo                                        Download