web-dev-qa-db-fra.com

Comment afficher une info-bulle sur une balise "option" HTML?

Que ce soit en utilisant du HTML ordinaire ou du JavaScript assisté par jQuery, comment afficher des info-bulles sur des éléments individuels <option> Pour faciliter le processus de décision ( il n’ya pas assez de place pour un autre type de contrôle et de l’aide sera nécessaire) ).

Est-ce que cela peut être fait si un plug-in ou similaire?

J'ai essayé quelques plugins d'info-bulle pour jQuery sans succès (y compris celui appelé Info-bulle).

Cette solution devrait:

  • travailler dans IE, WebKit ainsi que Gecko;
  • utilisant des éléments <select> standard enveloppés <option>.

Ainsi, si la solution souhaite utiliser d'autres balises, elle doit convertir ces éléments en éléments dont elle a besoin de manière dynamique (et ne pas s'attendre à ce que le balisage initial soit différent).

Le code correspondant peut être trouvé ici , il se trouve dans la section SafeSurf, où je souhaite afficher de l'aide sur la substitution des options quant à la signification des choix. À l'heure actuelle, il ne peut être affiché "qu'après coup" et une aide immédiate pour l'utilisateur serait bénéfique.

Comprenez que ce n'est pas facile et qu'il faudra probablement créer quelque chose. La prime sera donc attribuée à la solution la plus complète ou au crochet spécifique qui me rapprocherai le plus d'une solution que je peux créer. .

jqueryhtmljquery-pluginstooltip
61
Metalshark

Il semble que dans les 2 années qui ont suivi cette question, les autres navigateurs ont rattrapé leur retard (au moins sur Windows ... pas sûr des autres). Vous pouvez définir un attribut "title" sur la balise d'option:

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

Cela fonctionnait dans Chrome 20, IE 9 (et ses modes 8 et 7)), Firefox 3.6, RockMelt 16 (basé sur Chromium), tous sous Windows 7.

88
Jack.R.Abbit

Si l'augmentation du nombre d'options visibles est disponible, les solutions suivantes pourraient vous convenir:

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

Je viens d'essayer de le faire sur Chrome:

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

Cependant, le survol entrant ne se déclenche jamais ... Vous ne pouvez donc pas le faire du tout avec la sélection standard. Vous pouvez y parvenir par des moyens non standard:

  • Vous pouvez simuler une zone de sélection en utilisant des boîtes radio qui ressemblent à des listes déroulantes. Ainsi, par exemple, définissez un absolu de boîte radio et une opacité définie sur 0 au-dessus de la boîte stylisée prétendant être l'option.
  • Ou vous pouvez utiliser du javascript pur et créer une série de cases et ajouter des événements javascript onclick pour recréer vous-même la liste déroulante. Vous pourrez ainsi mettre à jour une valeur cachée avec la case sur laquelle vous avez cliqué à l'aide de javascript.
  • Ou utilisez une des bibliothèques non standard déjà existantes. (S'il y en a?)
4
balupton

Je ne pense pas que cela serait possible à travers tous les navigateurs.

W3Schools rapporte que les événements option existent dans tous les navigateurs, mais après la configuration de cette démonstration . Je ne peux que le faire fonctionner pour Firefox (pas Chrome ou IE), je ne l’ai pas testé sur d’autres navigateurs.

Firefox permet également mouseenter et mouseleave mais ceci n’est pas signalé sur la page w3schools.

Mise à jour: Honnêtement, à partir de l'exemple de code que vous avez fourni, je n'utiliserais même pas de boîte de sélection. Je pense que cela aurait l'air plus joli avec un curseur . J'ai mis à jour votre démo . J'ai dû apporter quelques modifications mineures à votre objet d'évaluation (ajout d'un numéro de niveau) et à l'onglet safesurf. Mais j'ai laissé à peu près tout le reste intact.

3
Mottie

Au moins sur Firefox, vous pouvez définir un attribut "title" sur la balise d'option:

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

3
Zaahid

Pourquoi utiliser un menu déroulant? La seule façon pour l'utilisateur de voir votre texte explicatif est de survoler aveuglément l'une des options.

Je pense qu'il serait préférable d'utiliser un groupe de boutons radio et, à côté de chaque élément, de mettre une icône d'info-bulle indiquant des informations supplémentaires, ainsi que de l'afficher après la sélection (comme vous l'avez actuellement).

Je me rends compte que cela ne résout pas exactement votre problème, mais je ne vois pas l'intérêt de lutter contre un élément html réputé pour son inflexibilité, alors que vous pourriez en utiliser un qui convient mieux en premier lieu.

2
Chris Fletcher

Je ne crois pas que vous puissiez obtenir cette fonctionnalité avec la norme <select> élément.

Ce que je suggérerais, c'est d'utiliser ce moyen.

http://filamentgroup.com/lab/jquery_iPod_style_and_flyout_menus/

La version de base de celui-ci ne prend pas trop de place et vous pouvez facilement lier les événements mouseover à des sous-éléments pour afficher une info-bulle Nice.

J'espère que cela vous aidera, Sinan.

1
Sinan