Wie hinzufügen von QuickInfos zu ein Dropdown/combobox?

Ich implementieren müssen, um die tooltip Funktion für die Dropdown-Liste. Auch, tooltip wird nicht statischen text ein, es sollte der ausgewählte Wert des Dropdown.
Wie kann ich das in jQuery?

InformationsquelleAutor Rakesh Juyal | 2010-01-20
  1. 1

    JAVASCRIPT UND JQUERY.

    Sie bestimmte waren über tooltip wird nur der ausgewählte Wert für alle dropdowns in die Seite auf einmal..

    <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 dem code unten, ich bin das hinzufügen von tooltip für alle Werte in der drop-down-als auch den gewählten Wert.
    Diese in java-script als auch und das zu für alle dropdowns in der Seite auf einmal.

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

    für jede Funktion, gehen Sie unten, um es zu lösen.

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

    oder,

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

    oder wenn Sie mit dojo,

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

    oder

    jQuery macht das ganze Skript noch einfacher..

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

    Ich würde vorschlagen, Sie verwenden die Funktion auf das onChange-Ereignis der dropdown-anstelle der document-ready-event.

    InformationsquelleAutor AZD
  2. 0

    Implementieren Sie können die dropdown-Liste im javascript-Code, div. Sobald Sie das tun, können Sie die tooltips mit so etwas wie: http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/

    • gibt es einen anderen Ansatz anstelle der Erstellung der div für das Dropdown
    InformationsquelleAutor stepanian
  3. 0

    Sowas ?

    selectElement.addEventListener('change', function (e) {
  selectElement.title = selectElement.value;
});
    • Alsciende, das ist nicht das, was ich erwartet hatte. :). Der Tooltip angezeigt werden soll, in netter Art und Weise. Die Titel angezeigt, die von browser sieht nicht gut aus. Tooltip: dev.mariusilie.net/content/simple-tooltip-jquery-plugin
    • Nun, ich denke, man kann nennen Sie eigene tooltip-api anstelle von ".Titel".
    InformationsquelleAutor Alsciende
  4. 0

    Bekam ich die soultion nutzen:

    Nur für den Fall, Sie wollte wissen, wie ich das geschafft habe:-

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

    Finden Sie hier:
    http://jsbin.com/owoka

    InformationsquelleAutor Rakesh Juyal
Schreibe einen Kommentar