Javascript / CSS Tooltip, который вы можете навести курсор и нажать - PullRequest
Новая
       41

Javascript / CSS Tooltip, который вы можете навести курсор и нажать

3 голосов
/ 29 октября 2010

Я ищу подсказку javascript / css, которая может выполнять следующие действия:

  1. Отображается, когда вы наводите курсор мыши на какой-либо элемент страницы (например, значок справки).
  2. Перемещает себя в зависимости от окна браузера (например, если он находится в правой части страницы, он будет отображаться слева от элемента страницы, в противном случае он будет отображаться справа от него. Таким образом, он не будетуйти со страницы.)
  3. Вы можете навести курсор на всплывающую подсказку, и она не исчезнет.Таким образом, вы можете выделить текст или щелкнуть гиперссылку внутри всплывающей подсказки.

Я использую dojo, но их подсказка dijit кажется очень негибкой, так как она может появиться только из другого элемента dijit,чаще всего кнопка диджита.Я бы предпочел не ссылаться на целую другую инфраструктуру javascript, такую ​​как jquery или прототип, так что, надеюсь, у кого-то есть способ сделать это, используя только один базовый скрипт.

Ответы [ 5 ]

2 голосов
/ 29 октября 2010

К сожалению для вас, плагины стиля всплывающей подсказки, доступные для Dojo, нигде не похожи на другие фреймворки (а именно: jQuery). Из-за этого у вас есть три варианта:

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

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

Используйте jQuery. Это уже было сказано дважды другими, но позвольте мне повторить это. jQuery имеет процветающую экосистему плагинов, и если время разработки / сопровождения действительно важно для вас, тогда jQuery определенно следует учитывать.

1 голос
/ 30 октября 2010

Я использовал несколько плагинов jQuery, в том числе jQuery TOOLS, Beauty Tips и Cluetip.Я думаю, что все три соответствуют вашим требованиям.

Если вместо черного ящика вы хотите знать, что происходит, я рекомендую этот урок:

http://www.sohtanaka.com/web-design/simple-tooltip-w-jquery-css/

(ивзгляните на раздел комментариев)

1 голос
/ 29 октября 2010

Опять же, предполагая, что вы не возражаете против использования jQuery (это круто !!), я поиграл с несколькими подсказками и нашел этот из них лучшим: http://flowplayer.org/tools/tooltip/index.html

Расширяемый с хорошей документацией. Проверьте параметр конфигурации 'position' и посмотрите, делает ли это то, что вам нужно.

Удачи!

1 голос
/ 29 октября 2010

Если вы решите использовать jQuery, qTip - это хороший плагин jQuery, который очень настраивается и, вероятно, удовлетворит ваши потребности. http://craigsworks.com/projects/qtip/

0 голосов
/ 30 октября 2010

В документации dijit.Tooltip приведены два простых примера, первый из которых - прикрепление всплывающей подсказки к простым узлам DOM, кажется, отвечает вашим потребностям. Второе происходит, чтобы соединить подсказку с другим основанным на dijit виджетом (кнопка). Обратите внимание, что свойство connectId принимает ссылку на узел dom или идентификатор строки. Обратите внимание, что dijit может использоваться либо программно, либо с использованием объявления на основе разметки.

Различные реализации всплывающей подсказки могут иметь различную функциональность. Среди прочего, dijit.Tooltip обеспечивает доступность ARIA для программ чтения с экрана, доступа к клавиатуре, включения двунаправленного текста и автоматического позиционирования вокруг узла, но в пределах границ экрана.

...