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

Я ищу плагины всплывающих подсказок для 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" и Jörn Zaefferer "Tooltip", похоже, не соответствуют законопроекту, если только я что-то не хватает.

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

Ответ 1

OHHHHHHHH Лучший из всех!

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

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

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

EDIT: я вижу, что вы упомянули Йорна (я не знал его имени), но ищите пример "yahoo", он должен делать то, что вы хотите.

Ответ 2

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

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

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

alt text http://www.balexandre.com/temp/StackOverflow_jquerySimpleTip.png

Обновление

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

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

Ответ 3

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

Ответ 4

Должен ли быть 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>

ИЗМЕНИТЬ

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

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

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

Ответ 5

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

Кроме того, у него есть темы

Ответ 6

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

Смотрите здесь, также

Ответ 7

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

Ответ 8

Просто лучший http://flowplayer.org/tools/tooltip/index.html

Ответ 9

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

Tipped: http://projects.nickstakenburg.com/tipped

Ответ 10

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

Ответ 11

подумал об использовании этого: http://www.codylindley.com/blogstuff/js/jtip/

и это: http://onehackoranother.com/projects/jquery/tipsy/

другие рекомендуемые могут лучше соответствовать вашим потребностям

Ответ 12

Я рекомендую ClueTip: http://plugins.learningjquery.com/cluetip/ Он прост в использовании, поддерживает разрывы строк в подсказках инструментов (с свободно настраиваемым разделителем) и, кажется, хорошо работают в ячейках таблицы (что не было в случае http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/).

Ответ 13

jQuery UI теперь имеет встроенный модуль подсказок: http://jqueryui.com/tooltip/

Работает отлично и легко настраивается.

Ответ 14

Я также построил плагин jQuery для всплывающих подсказок - он действительно маленький - 5 КБ, минированный, очень простой в настройке и использовании, и с множеством опций конфигурации; он будет размещать подсказки внутри области просмотра независимо от вертикальной/горизонтальной прокрутки или размера окна; Ширина и цвет фона могут быть изменены при инициализации. Он не использовал никаких изображений - он использует CSS для всех модных вещей и изящно деградирует для старых браузеров. Он работает даже в IE6:) И по умолчанию он выглядит так:

Ответ 15

NewTip →

      New Tooltip JQuery plugin with support in browsers from IE7+, Firefox, Chrome

Очень привлекательный и простой в настройке для обоих событий обработки обратных вызовов и для любого типа элемента.

попробуйте:

JQuery Plugin Registry: http://plugins.jquery.com/newtip/

Домашняя страница Github: https://github.com/chandra7mca/newtip