Як можна відобразити підказку на тезі HTML "option"?

Question 1

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

Чи можна це зробити за допомогою плагіна чи подібного?

Я спробував кілька плагінів підказки для jQuery без успіху (включаючи той, що називається Підказка).

Це рішення повинно:

робота в IE, WebKit, а також Gecko;
використовуючи стандартні <select>обгорнуті <option>елементи.

Отже, якщо рішення хоче використовувати інші теги, йому слід динамічно перетворити ці елементи в те, що йому потрібно (і не очікувати, що початкова націнка буде якоюсь іншою).

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

Зрозумійте, що це непросто, і що, мабуть, потрібно буде щось створити - отже, нагорода буде присуджена до найповнішого рішення або до конкретного гачка, який потрапляє найближче до рішення, яке я можу створити.

Question 2

Здається, за 2 роки з моменту цього запитання інші браузери наздогнали (принаймні в Windows ... не впевнений в інших). Ви можете встановити атрибут "title" для тегу параметра:

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

Це працювало в Chrome 20, IE 9 (та його режимах 8 та 7), Firefox 3.6, RockMelt 16 (на основі Chromium) - все у Windows 7

Question 3

Якщо доступне збільшення кількості видимих опцій, вам може підійти наступне:

<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

Я просто спробував зробити це в 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 і мати ряд полів та додавати події onvasc javascript, щоб самостійно відтворити dropbox - так ви оновите приховане значення, залежно від того, яке поле було натиснуто за допомогою javascript.
Або скористайтеся однією з нестандартних бібліотек, яка вже існує. (Якщо такі є?)

Question 5

Принаймні у Firefox ви можете встановити атрибут "title" для тегу параметра:

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

Question 6

Я не думаю, що це можливо зробити у всіх браузерах.

W3Schools повідомляє, що події опцій існують у всіх браузерах, але після налаштування цього тестового демо . Я можу змусити його працювати лише для Firefox (не Chrome або IE), я не тестував його в інших браузерах.

Firefox також дозволяє введення миші та залишення миші, але про це не повідомляється на сторінці w3schools.

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

Question 7

Навіщо взагалі використовувати випадаючий список? Користувач побачить ваш пояснювальний текст єдиним способом, сліпо наводячи курсор на один із варіантів.

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

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

Question 8

Я не вірю, що ви можете досягти цієї функціональності за допомогою стандартного <select>елемента.

Я б запропонував використовувати такий спосіб.

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

Базова версія цього файлу не займе занадто багато місця, і ви можете легко його прив'язати mouseover події до підпунктів, щоб показати гарну підказку.

Сподіваюся, це допомагає, Сінане.