ansaurus

Question

How to add tooltip to a drop down/combobox?

Answer 1

A:

You can implement the dropdown in javascript as a div. Once you do that, you can add the tooltips using something like: http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/

Ralph Stevens 2010-01-20 07:06:37

is there any other approach instead of creating the div for drop down

Rakesh Juyal 2010-01-20 08:53:25

Answer 2

A:

Something like this ?

selectElement.addEventListener('change', function (e) {
  selectElement.title = selectElement.value;
});

Alsciende 2010-01-20 09:21:55

Alsciende, this is not what i was expecting. :). Tooltip must be displayed in nice way. The title shown by browser doesn't look good. Tooltip: http://dev.mariusilie.net/content/simple-tooltip-jquery-plugin

Rakesh Juyal 2010-01-20 09:27:31

Well, I guess you can call you own tooltip-api instead of ".title".

Alsciende 2010-01-20 10:02:23

Answer 3

A:

I got the soultion:

Just in case you wanted to know how i did that:-

jQuery('#myDropDownID').hover(function(e){
                var tipX = e.pageX + 12;
                var tipY = e.pageY + 12; 
                jQuery("body").append("<div id='myTooltip' class='portal-tool-tip' style='position: absolute; z-index: 100; display: none;'>" + jQuery("OPTION:selected", this).text()  + "</div>");
                if(jQuery.browser.msie) var tipWidth = jQuery("#myTooltip").outerWidth(true)
                else var tipWidth = jQuery("#myTooltip").width()
                jQuery("#myTooltip").width(tipWidth);
                jQuery("#myTooltip").css("left", tipX).css("top", tipY).fadeIn("medium");
            }, function(){
                jQuery("#myTooltip").remove();              
            }).mousemove(function(e){
                var tipX = e.pageX + 12;
                var tipY = e.pageY + 12;
                var tipWidth = jQuery("#myTooltip").outerWidth(true);
                var tipHeight = jQuery("#myTooltip").outerHeight(true);
                if(tipX + tipWidth > jQuery(window).scrollLeft() + jQuery(window).width()) tipX = e.pageX - tipWidth;
                if(jQuery(window).height()+jQuery(window).scrollTop() < tipY + tipHeight) tipY = e.pageY - tipHeight;
                jQuery("#myTooltip").css("left", tipX).css("top", tipY).fadeIn("medium");
            });

See here: http://jsbin.com/owoka

Rakesh Juyal 2010-01-20 13:30:36

Answer 4

A:

You can try http://webneed.blogspot.com/2009/12/how-to-add-tooltips-to-dropdownlist.html

Fnandop 2010-02-17 17:22:09

ansaurus

tags:

views:

answers:

How to add tooltip to a drop down/combobox?

related questions