Либо используя простой JavaScript или jQuery-справку JavaScript, как вы показываете всплывающие подсказки для отдельных элементов <option>, чтобы помочь процессу принятия решения (недостаточно места для управления другим типом, и какая-то помощь понадобится).
Можно ли это сделать с помощью плагина или подобного?
Я пробовал несколько плагинов для всплывающих подсказок для jQuery без успеха (в том числе под названием Tooltip).
Это решение должно:
<select> обернутых элементов <option>.Итак, если решение хочет использовать другие теги, оно должно преобразовать эти элементы в то, что ему нужно динамически (и не ожидать, что начальная разметка будет различной).
Код для этого можно найти здесь, он находится в разделе SafeSurf, где я хочу отобразить некоторую помощь при опрокидывании опций о смысле выбора. В настоящее время он может отображаться только "после факта", и некоторая поддержка для пользователя была бы полезной.
Цените, что это непросто, и что-то, вероятно, нужно будет создать, чтобы награда была присуждена наиболее полному решению или конкретному крючку, который придает мне самое близкое к решению, которое я могу создать.
Кажется, что за два года с тех пор, как это было спрошено, другие браузеры догнали (по крайней мере, на Windows... не уверены в других). Вы можете установить атрибут "title" в теге option:
<option value="" title="Tooltip">Some option</option>
Это работало в Chrome 20, IE 9 (и его режимах 8 и 7), Firefox 3.6, RockMelt 16 (на основе Chromium) на Windows 7
Если доступно количество доступных видимых опций, для вас может работать следующее:
<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>
Я не думаю, что это можно было бы сделать во всех браузерах.
W3Schools сообщает, что события опций существуют во всех браузерах, но после настройки это тестовая демонстрация. Я могу заставить его работать только для Firefox (не Chrome или IE), я не тестировал его в других браузерах.
Firefox также позволяет mouseenter и mouseleave, но это не сообщается на странице w3schools.
Обновление: Честно говоря, если посмотреть на код кода, который вы предоставили, я бы даже не использовал поле выбора. Я думаю, что было бы лучше с slider. Я обновил вашу демонстрацию. Мне пришлось внести несколько незначительных изменений в ваш объект рейтинга (добавив номер уровня) и вкладку safesurf. Но я оставил практически все остальное.
Я просто попытался сделать это в Chrome:
var $sel = $('#sel'); $sel.find('option').hover(function(){$sel.attr('title',$(this).attr('title'));console.log($(this).attr('title'))}, function(){$sel.attr('title','');});
Однако наведение никогда не срабатывает... Таким образом, вы не сможете сделать это вообще, используя стандартный выбор. Вы могли бы добиться этого, хотя бы с помощью некоторых нестандартных способов:
По крайней мере, в firefox вы можете установить атрибут "title" в теге option:
<option value="" title="Tooltip">Some option</option>
Зачем использовать раскрывающийся список? Единственный способ, которым пользователь увидит ваш пояснительный текст, - это слепо нависнуть над одним из вариантов.
Я думаю, что было бы предпочтительнее использовать группу переключателей, а рядом с каждым элементом поставить значок всплывающей подсказки, указывающий дополнительную информацию, а также отображать его после выбора (например, в настоящее время у вас есть).
Я понимаю, что это точно не решает вашу проблему, но я не вижу смысла бороться с элементом html, который известен своей негибкостью, когда вы могли бы просто использовать тот, который лучше всего подходит в первую очередь.
Я не считаю, что вы можете достичь этой функциональности со стандартным элементом <select>.
Я бы предложил использовать такой способ.
http://filamentgroup.com/lab/jquery_ipod_style_and_flyout_menus/
Базовая версия не займет слишком много места, и вы можете легко привязать события mouseover к подпунктам, чтобы показать хорошую подсказку.
Надеюсь, это поможет, Синан.