Рекомендации для подсказок jQuery - PullRequest
Новая
       46

Рекомендации для подсказок jQuery

18 голосов
/ 13 февраля 2009

Я ищу плагины всплывающей подсказки для jQuery, которые позволили бы использовать следующий тип поведения. 

<a href="somewhere.html">
 <span>
  <img src="someimage.jpg" style="display: none;" />
  Here is the tooltip content.
 </span>
 Here is the link to somewhere.
</a>

Надеюсь, что мне нужно навести курсор мыши на «Вот ссылка на куда-то» и всплыть всплывающую подсказку, показывающую содержимое диапазона, содержащего «someimage.jpg» и «Вот содержимое всплывающей подсказки».

Я бы предпочел, чтобы подсказка отслеживала движение мыши по ссылке и чтобы внешний вид подсказки (цвет фона, прозрачность, цвет границы и т. Д.) Был настраиваемым.

Две самые популярные подсказки, которые я нашел, «clueTip» и «Всплывающая подсказка» Йорна Зефферера, похоже, не подходят, если я что-то упустил.

В конечном итоге ссылки и изображения будут генерироваться динамически.

Ответы [ 15 ]

18 голосов
/ 13 февраля 2009

ОХХХХХХХХ, лучший в истории!

http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/

Демонстрации: (посмотрите на пример "Ссылка на Yahoo", чтобы удовлетворить все ваши потребности)

http://jquery.bassistance.de/tooltip/demo/

РЕДАКТИРОВАТЬ: я вижу, вы упомянули Jorn (я не знал его имени), но посмотрите на пример "Yahoo", он должен делать то, что вы хотите.

8 голосов
/ 13 февраля 2009

говорю вам правду, я попробовал пару из них, но я придерживаюсь того, что мне действительно нравится:

http://craigsworks.com/simpletip/sandbox/

Есть много вещей, которые вы можете изменить, и они выглядят фантастически в любом месте! :)

alt text
(источник: balexandre.com )

Обновлено

Как сказал pbz, это больше не доступно для нарушений авторских прав, но то же самое можно найти у «оригинального» разработчика на

http://www.nickstakenburg.com/projects/prototip2/

5 голосов
/ 13 февраля 2009

Я большой поклонник BeautyTips

4 голосов
/ 13 февраля 2009

Должно ли это быть JQuery? Вы можете сделать это только с помощью CSS, если хотите. 

a.info
{
    position: relative;
    z-index: 24;
}

a.info:hover
{
    z-index: 25;    
}

a.info span
{
    display: none;
}

a.info:hover span
{
    display: block;
    position: absolute;
    top: 2em;
    left: 2em;
    width: 15em;
    padding: 6px;
    border: 1px solid black;
    background-color: #eeeeee;
    color: #000;
}

Тогда вы можете использовать его так же, как он у вас есть. 

<a href="somewhere.html" class="info">
 <span>
  <img src="images/someImage.jpg" />
  Here is the tooltip content.
 </span>
 Here is the link to somewhere.
</a>

EDIT

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

http://james.padolsey.com/demos/imgPreview/full/

Вы должны либо следовать учебному руководству и написать плагин, либо загрузить пример плагина.

2 голосов
/ 29 сентября 2011

qTip - без сомнения

См. здесь , также

2 голосов
/ 06 апреля 2011

Это должно позволить вам положить все, что вы хотите, в окно подсказки.
http://code.google.com/p/next-msg/

Плюс у него есть темы enter image description here

1 голос
/ 16 февраля 2012

Это отличный вариант, который я использую, у него есть опции позиционирования и слежения за мышью, а также поставляется с кучей тем из коробки. http://www.websanova.com/plugins/websanova/tooltip

1 голос
/ 19 февраля 2011

Вот всплывающая подсказка jQuery, которая может делать практически все, тоже отлично выглядит:

Советы: http://projects.nickstakenburg.com/tipped

1 голос
/ 04 февраля 2011
1 голос
/ 25 февраля 2010

Вы также можете попробовать инструмент под названием Likno Web Tooltips Builder: http://www.likno.com/jquery-tooltips/index.php

Страница:
...