Question

我必须实现工具提示功能才能下拉。此外，工具提示不会是任何静态文本，它应该是下拉列表的选定值。我怎么能在jQuery中做到这一点？

Answer 1

JAVASCRIPT AND 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...
}

或者如果您使用的是dojo，

<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事件中使用该函数，而不是文档就绪事件。

Answer 2

您可以将javascript中的下拉列表实现为div。完成后，您可以使用以下内容添加工具提示：http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/

Answer 3

这样的东西？

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

Answer 4

我得到了解决方案：

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

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

Answer 5

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

如何在下拉/组合框中添加工具提示？

5 个答案: