Как я могу отобразить всплывающую подсказку в теге "опция" HTML?

Либо используя простой JavaScript или jQuery-справку JavaScript, как вы показываете всплывающие подсказки для отдельных элементов <option>, чтобы помочь процессу принятия решения (недостаточно места для управления другим типом, и какая-то помощь понадобится).

Можно ли это сделать с помощью плагина или подобного?

Я пробовал несколько плагинов для всплывающих подсказок для jQuery без успеха (в том числе под названием Tooltip).

Это решение должно:

работает в IE, WebKit, а также в Gecko;
использование стандартных <select> обернутых элементов <option>.

Итак, если решение хочет использовать другие теги, оно должно преобразовать эти элементы в то, что ему нужно динамически (и не ожидать, что начальная разметка будет различной).

Код для этого можно найти здесь, он находится в разделе SafeSurf, где я хочу отобразить некоторую помощь при опрокидывании опций о смысле выбора. В настоящее время он может отображаться только "после факта", и некоторая поддержка для пользователя была бы полезной.

Цените, что это непросто, и что-то, вероятно, нужно будет создать, чтобы награда была присуждена наиболее полному решению или конкретному крючку, который придает мне самое близкое к решению, которое я могу создать.

Ответ 1

Кажется, что за два года с тех пор, как это было спрошено, другие браузеры догнали (по крайней мере, на Windows... не уверены в других). Вы можете установить атрибут "title" в теге option:

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

Это работало в Chrome 20, IE 9 (и его режимах 8 и 7), Firefox 3.6, RockMelt 16 (на основе Chromium) на Windows 7

Ответ 2

Если доступно количество доступных видимых опций, для вас может работать следующее:

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

Ответ 3

Я не думаю, что это можно было бы сделать во всех браузерах.

W3Schools сообщает, что события опций существуют во всех браузерах, но после настройки это тестовая демонстрация. Я могу заставить его работать только для Firefox (не Chrome или IE), я не тестировал его в других браузерах.

Firefox также позволяет mouseenter и mouseleave, но это не сообщается на странице w3schools.

Обновление: Честно говоря, если посмотреть на код кода, который вы предоставили, я бы даже не использовал поле выбора. Я думаю, что было бы лучше с slider. Я обновил вашу демонстрацию. Мне пришлось внести несколько незначительных изменений в ваш объект рейтинга (добавив номер уровня) и вкладку safesurf. Но я оставил практически все остальное.

Ответ 4

Я просто попытался сделать это в Chrome:

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

Однако наведение никогда не срабатывает... Таким образом, вы не сможете сделать это вообще, используя стандартный выбор. Вы могли бы добиться этого, хотя бы с помощью некоторых нестандартных способов:

Вы можете подделать поле выбора с помощью радиоокна, которые выглядят как выпадающие меню. Так, например, установите абсолютное положение радиоокна и непрозрачность, установленную на 0, помещенную над стилизованным полем, который притворяется опцией.
Или вы можете использовать чистый javascript и иметь серию ящиков и добавлять события javascript onclick, чтобы сами воссоздать Dropbox - так что вы обновите скрытое значение с помощью того, что окно было нажато с помощью javascript.
Или используйте одну из уже нестандартных библиотек. (Если есть?)

Ответ 5

По крайней мере, в firefox вы можете установить атрибут "title" в теге option:

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

Ответ 6

Зачем использовать раскрывающийся список? Единственный способ, которым пользователь увидит ваш пояснительный текст, - это слепо нависнуть над одним из вариантов.

Я думаю, что было бы предпочтительнее использовать группу переключателей, а рядом с каждым элементом поставить значок всплывающей подсказки, указывающий дополнительную информацию, а также отображать его после выбора (например, в настоящее время у вас есть).

Я понимаю, что это точно не решает вашу проблему, но я не вижу смысла бороться с элементом html, который известен своей негибкостью, когда вы могли бы просто использовать тот, который лучше всего подходит в первую очередь.

Ответ 7

Я не считаю, что вы можете достичь этой функциональности со стандартным элементом <select>.

Я бы предложил использовать такой способ.

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

Базовая версия не займет слишком много места, и вы можете легко привязать события mouseover к подпунктам, чтобы показать хорошую подсказку.

Надеюсь, это поможет, Синан.