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

76

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.

jquery html jquery-plugins tooltip Metallhai
quelle
Abgesehen von der Frage verstehe ich nicht alle diese Abstimmungen zu den Antworten unten ...
Sinan
Die Abstimmungen waren für Antworten, die ich nicht nützlich fand. Es hat also nicht geholfen, mit einer Lösung zu antworten, die nur in einem Browser funktioniert, oder mit einem GUI-Toolkit, das über die Seite sprang (nicht wie ein Auswahlfeld funktioniert). Während die Demonstration des Ereignismodells in etwas, das in verschiedenen Browsern getestet wurde, dies tat.
Metalshark
Aus den FAQ dieser Seite : Be nice. Behandle andere mit dem gleichen Respekt, den sie von dir erwarten. Be honest. Wenn Sie Fehlinformationen sehen, stimmen Sie diese ab . Von mir: Ich sehe keine Fehlinformationen zu diesen Antworten. Wenn Sie sie nicht nützlich finden, solange sie nicht fehlerhaft sind, geben Sie einfach einen Kommentar ein, warum sie nicht nützlich sind.
Sinan
Demütige Entschuldigungen, nahm den Tooltip auf persönlicher Ebene zum Nennwert. Wenn ich sie jetzt zurücknehmen könnte, würde ich (für jeden) - wenn ein Moderator dies kann / wird, dann ja bitte.
Metalshark
Sie suchen im Grunde nach einem Dropdown-Plugin, das das titleAttribut des Optionselements in das generierte <li>oder <a>Element kopiert . Niemand fällt Ihnen ein, also möchten Sie eine vorhandene ändern oder eine neu erfinden. Tut mir leid, dass ich nicht als Antwort gepostet habe, da dies im Grunde bereits von balupton gegeben wurde.
Ich

Antworten:

107

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

Hase
quelle
In Opera scheint es nur in Nicht-Dropdown-Auswahlfeldern zu funktionieren.
Bergi
1
Arbeiten an Safari Version 10.0.2 (12602.3.12.0.1)
LoKat
FUNKTIONIERT NICHT für Firefox v52x in einer Linux-Box
MarcoZen
11

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>
pferate
quelle
1
Es ist nicht realisierbar, aber es beantwortet die Frage direkt. Hut ab!
Metalshark
2
Es funktioniert nicht, wenn ich die Größe = "10" aus dem Auswahl-Tag entferne! jsfiddle.net/7xbwemzL
kudlatiger
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?)
Balupton
quelle
Ich habe meinen Beitrag aktualisiert, um die Details meiner vorgeschlagenen Alternativen weiter zu erläutern. Sollte für einen guten Vorsprung
sorgen
3

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

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

zbateson
quelle
Einverstanden - Ich verwende bereits title = "" und leider bleibt WebKit auf der Strecke.
Metalshark
3

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.

Mottie
quelle
1
Ich habe meine Antwort aktualisiert ... es ist eine persönliche Meinung, aber vielleicht eine bessere Option für Sie.
Mottie
Aha, ja, ein Schieberegler scheint dafür eine viel bessere Option zu sein. Die Frage bleibt bestehen, wird aber wahrscheinlich im endgültigen Code verwendet.
Metalshark
2

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.

Chris Fletcher
quelle
1

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.

Sinan
quelle
Die flachen Dropdowns hier führen dazu, dass Browserfenster wie ein Verrückter herumspringen - auch wenn Sie nicht die Option & lt; select & gt; Tags, die in mobilen Browsern merkwürdig sind.
Metalshark
1
Das ist nur die Idee, die ich vorgeschlagen habe, ist nicht die fertige Lösung für diesen Link. Eine ulungeordnete Liste wird in jedem Browser unterstützt, der Rest zeigt und versteckt nur liElemente. Ich glaube immer noch, dass dies der richtige Weg sein sollte.
Sinan