Wie kann ich einen Tooltip auf einem HTML-Optionstag anzeigen?

Question 1

Wie können Sie QuickInfos für einzelne <option>Elemente anzeigen , um den Entscheidungsprozess zu unterstützen, entweder mit einfachem HTML oder mit jQuery unterstütztem JavaScript ( es ist nicht genügend Platz für eine andere Art der Steuerung vorhanden, und es wird Hilfe benötigt ).

Kann dies über ein Plug-In oder ähnliches erfolgen?

Ich habe einige Tooltip-Plugins für jQuery ohne Erfolg ausprobiert (einschließlich des Tooltips).

Diese Lösung sollte:

Arbeit in IE, WebKit sowie Gecko;
Verwendung von Standard <select>gewickelten <option>Elemente.

Wenn die Lösung also andere Tags verwenden möchte, sollte sie diese Elemente dynamisch in das konvertieren, was sie benötigt (und nicht erwarten, dass das anfängliche Markup anders ist).

Den Code dafür finden Sie hier . Er befindet sich im Abschnitt SafeSurf, in dem ich Hilfe zum Rollover der Optionen hinsichtlich der Bedeutung der Auswahlmöglichkeiten anzeigen möchte. Gegenwärtig kann es nur "nachträglich" angezeigt werden, und eine Vorabhilfe für den Benutzer wäre von Vorteil.

Schätzen Sie, dass dies nicht einfach ist und dass wahrscheinlich etwas erstellt werden muss. Daher wird das Kopfgeld an die vollständigste Lösung oder den spezifischen Haken vergeben, der mich einer Lösung am nächsten bringt, die ich erstellen kann.

Question 2

Es scheint, dass in den 2 Jahren, seit dies gefragt wurde, die anderen Browser aufgeholt haben (zumindest unter Windows ... nicht sicher über andere). Sie können ein "title" -Attribut für das Options-Tag festlegen:

<option value="" title="Tooltip">Some option</option>

Dies funktionierte in Chrome 20, IE 9 (und seinen 8 & 7-Modi), Firefox 3.6 und RockMelt 16 (Chromium-basiert) unter Windows 7

Question 3

Wenn die Anzahl der sichtbaren Optionen erhöht werden kann, funktioniert möglicherweise Folgendes für Sie:

<html>
    <head>
        <title>Select Option Tooltip Test</title>
        <script>
            function showIETooltip(e){
                if(!e){var e = window.event;}
                var obj = e.srcElement;
                var objHeight = obj.offsetHeight;
                var optionCount = obj.options.length;
                var eX = e.offsetX;
                var eY = e.offsetY;

                //vertical position within select will roughly give the moused over option...
                var hoverOptionIndex = Math.floor(eY / (objHeight / optionCount));

                var tooltip = document.getElementById('dvDiv');
                tooltip.innerHTML = obj.options[hoverOptionIndex].title;

                mouseX=e.pageX?e.pageX:e.clientX;
                mouseY=e.pageY?e.pageY:e.clientY;

                tooltip.style.left=mouseX+10;
                tooltip.style.top=mouseY;

                tooltip.style.display = 'block';

                var frm = document.getElementById("frm");
                frm.style.left = tooltip.style.left;
                frm.style.top = tooltip.style.top;
                frm.style.height = tooltip.offsetHeight;
                frm.style.width = tooltip.offsetWidth;
                frm.style.display = "block";
            }
            function hideIETooltip(e){
                var tooltip = document.getElementById('dvDiv');
                var iFrm = document.getElementById('frm');
                tooltip.innerHTML = '';
                tooltip.style.display = 'none';
                iFrm.style.display = 'none';
            }
        </script>
    </head>
    <body>
        <select onmousemove="showIETooltip();" onmouseout="hideIETooltip();" size="10">
            <option title="Option #1" value="1">Option #1</option>
            <option title="Option #2" value="2">Option #2</option>
            <option title="Option #3" value="3">Option #3</option>
            <option title="Option #4" value="4">Option #4</option>
            <option title="Option #5" value="5">Option #5</option>
            <option title="Option #6" value="6">Option #6</option>
            <option title="Option #7" value="7">Option #7</option>
            <option title="Option #8" value="8">Option #8</option>
            <option title="Option #9" value="9">Option #9</option>
            <option title="Option #10" value="10">Option #10</option>
        </select>
        <div id="dvDiv" style="display:none;position:absolute;padding:1px;border:1px solid #333333;;background-color:#fffedf;font-size:smaller;z-index:999;"></div>
        <iframe id="frm" style="display:none;position:absolute;z-index:998"></iframe>
    </body>
</html>

Question 4

Ich habe gerade versucht, dies auf Chrome zu tun:

var $sel = $('#sel'); $sel.find('option').hover(function(){$sel.attr('title',$(this).attr('title'));console.log($(this).attr('title'))}, function(){$sel.attr('title','');});

Die Hover-Eingabe wird jedoch nie ausgelöst ... Sie können dies also mit der Standardauswahl überhaupt nicht tun. Sie können dies jedoch auf nicht standardmäßige Weise erreichen:

Sie können eine Auswahlbox fälschen, indem Sie Optionsfelder verwenden, die wie Dropdowns aussehen. Lassen Sie beispielsweise eine Optionsbox absolut positioniert und die Deckkraft auf 0 gesetzt über der gestalteten Box platzieren, die vorgibt, die Option zu sein.
Oder Sie können reines Javascript verwenden und eine Reihe von Feldern verwenden und Javascript-Onclick-Ereignisse hinzufügen, um die Dropbox selbst neu zu erstellen. Sie aktualisieren also einen versteckten Wert mit dem Feld, auf das mit Javascript geklickt wurde.
Oder verwenden Sie eine der nicht standardmäßigen Bibliotheken, die es bereits gibt. (Wenn es welche gibt?)

Question 5

Zumindest unter Firefox können Sie ein "title" -Attribut für das Options-Tag festlegen:

<option value="" title="Tooltip">Some option</option>

Question 6

Ich denke nicht, dass dies in allen Browsern möglich wäre.

W3Schools meldet, dass die Optionsereignisse in allen Browsern vorhanden sind, jedoch nach dem Einrichten dieser Testdemo . Ich kann es nur für Firefox zum Laufen bringen (nicht für Chrome oder IE). Ich habe es nicht in anderen Browsern getestet.

Firefox erlaubt auch Mouseenter und Mouseleave, dies wird jedoch nicht auf der Seite w3schools gemeldet.

Update: Ehrlich gesagt würde ich beim Betrachten des von Ihnen bereitgestellten Beispielcodes nicht einmal ein Auswahlfeld verwenden. Ich denke, mit einem Schieberegler würde es besser aussehen . Ich habe Ihre Demo aktualisiert . Ich musste ein paar kleinere Änderungen an Ihrem Bewertungsobjekt (Hinzufügen einer Levelnummer) und der Registerkarte "Safesurf" vornehmen. Aber ich habe so ziemlich alles andere intakt gelassen.

Question 7

Warum überhaupt ein Dropdown verwenden? Der Benutzer kann Ihren erläuternden Text nur sehen, indem er blind über eine der Optionen fährt.

Ich denke, es wäre vorzuziehen, eine Optionsfeldgruppe zu verwenden und neben jedem Element ein Tooltip-Symbol einzufügen, das zusätzliche Informationen anzeigt und diese nach der Auswahl anzeigt (wie Sie es derzeit haben).

Mir ist klar, dass dies Ihr Problem nicht genau löst, aber ich sehe keinen Sinn darin, mit einem HTML-Element zu kämpfen, das für seine Inflexibilität berüchtigt ist, wenn Sie nur eines verwenden könnten, das überhaupt besser geeignet ist.

Question 8

Ich glaube nicht, dass Sie diese Funktionalität mit Standardelementen erreichen können <select>.

Was ich vorschlagen würde, ist so zu verwenden.

http://filamentgroup.com/lab/jquery_ipod_style_and_flyout_menus/

Die Basisversion nimmt nicht zu viel Platz ein und Sie können mouseoverEreignisse einfach an Unterelemente binden , um einen schönen Tooltip anzuzeigen.

Hoffe das hilft, Sinan.