I have to implement the tooltip feature for drop down. Also, tooltip will not be any static text, it should be the selected value of drop down. How can i do this in jQuery?
I have to implement the tooltip feature for drop down. Also, tooltip will not be any static text, it should be the selected value of drop down. How can i do this in jQuery?
Share Improve this question edited Jan 20, 2010 at 9:16 Rakesh Juyal asked Jan 20, 2010 at 7:02 Rakesh JuyalRakesh Juyal 36.8k74 gold badges178 silver badges217 bronze badges5 Answers
Reset to default 1JAVASCRIPT AND JQUERY.
You were specific about tooltip for only the selected value for all the dropdowns in the page at once..
<script language="javascript">
function dropDwnToolTips() {
var drpdwnlst = document.getElementsByTagName("Select");
for(i=0;i<drpdwnlst.length;i++){
drpdwnlst[i].title = drpdwnlst[i].options[drpdwnlst[i].selectedIndex].text;
}
}
</script>
In the below code i am adding tooltip for all the values in the drop down as well as the selected value. This in java script as well and that too for all the dropdowns in the page at once.
<script language="javascript">
function dropDwnToolTips() {
var drpdwnlst = document.getElementsByTagName("Select");
for(i=0;i<drpdwnlst.length;i++){
for(j=0;j<drpdwnlst[i].length;j++){
drpdwnlst[i][j].title = drpdwnlst[i].options[j].text;
}
drpdwnlst[i].title = drpdwnlst[i].options[drpdwnlst[i].selectedIndex].text;
}
}
</script>
for either function, Do the below to trigger it.
<body onload="dropDwnToolTips()">
...
</body>
or,
<script language="javascript">
window.onload=function() {
... script code goes here...
}
or if you are using dojo,
<script language="javascript">
dojo.ready(function() {
... script code goes here...
});
or
jQuery makes the whole script even simpler..
$(document).ready(function() {
$("select").each(function() {
var s = this;
for (i = 0; i < s.length; i++)
s.options[i].title = s.options[i].text;
if (s.selectedIndex > -1)
s.onmousemove = function() { s.title = s.options[s.selectedIndex].text; };
});
});
I would suggest you to use the function on the onChange event of the dropdown instead of document ready event.
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/
Something like this ?
selectElement.addEventListener('change', function (e) {
selectElement.title = selectElement.value;
});
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./owoka
You can try http://webneed.blogspot./2009/12/how-to-add-tooltips-to-dropdownlist.html
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745200186a4616285.html
评论列表（0条）