如何将工具提示添加到下拉/组合框？

我必须实现下拉工具提示功能。另外，工具提示不会是任何静态文本，它应该是下拉选定的值。我如何在jQuery中做到这一点？如何将工具提示添加到下拉/组合框？

2010-01-20 Rakesh Juyal

我得到了soultion：

以防万一你想知道我是怎么做的： -

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"); 
      });

在这里看到： http://jsbin.com/owoka

来源

2010-01-20 13:30:36

您可以在javascript中以div的形式实现下拉菜单。一旦你这样做，你可以使用类似的东西添加工具提示：http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/

来源

2010-01-20 07:06:37 stepanian

是否有任何其他方法，而不是创建div下降 – 2010-01-20 08:53:25

是这样的？

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

来源

2010-01-20 09:21:55 Alsciende

Alsciende，这不是我所期待的。 :)。工具提示必须以很好的方式显示。浏览器显示的标题看起来不太好。工具提示：http://dev.mariusilie.net/content/simple-tooltip-jquery-plugin – 2010-01-20 09:27:31

嗯，我想你可以称你自己的tooltip-api而不是“.title”。 – Alsciende 2010-01-20 10:02:23

你可以试试http://webneed.blogspot.com/2009/12/how-to-add-tooltips-to-dropdownlist.html

来源

2010-02-17 17:22:09 Fnandop

JAVASCRIPT和JQUERY。

你是具体的关于提示只在页面一下子所有的下拉菜单中选择的值..

<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>

在下面的代码我在损失施加工具提示中的所有值下降，以及作为选定的值。这在java脚本中也是如此，并且同样适用于页面中的所有下拉列表。

<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>

对于任一功能，请执行以下操作来触发它。

<body onload="dropDwnToolTips()"> 
... 
</body>

，或者

<script language="javascript"> 
window.onload=function() { 
    ... script code goes here... 
}

，或者如果您使用的道场，

<script language="javascript"> 
dojo.ready(function() { 
    ... script code goes here... 
});

或

jQuery让整个脚本更简单..

$(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; }; 
    }); 
});

我建议你在下拉列表的onChange事件上使用函数，而不是文档就绪事件。

来源

2013-01-30 04:05:22 AZD

如何将工具提示添加到下拉/组合框？

回答

相关问题