如何將工具提示添加到下拉/組合框？

我必須實現下拉工具提示功能。另外，工具提示不會是任何靜態文本，它應該是下拉選定的值。我如何在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

如何將工具提示添加到下拉/組合框？

回答

相關問題