Всплывающие подсказки с помощью jQuery

Владимир | | CSS, HTML, JavaScript, Web разработка.

jquery tooltip

Сегодня речь пойдет о JavaScript библиотеке, которая предназначена для создания всплывающих подсказок на web странице. Называется она Tooltip и представляет собой плагин для библиотеки jQuery.

Раньше я писал об аналогичном плагине для библиотеки Prototype.

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

Рассмотрим несколько примеров.

Для того чтобы использовать плагин, нужно в заголовке страницы подключить библиотеку jQuery, плагин Dimensions и сам Tooltip.

Например:

<script type="text/javascript" src="js/jquery-compressed.js"></script>
<script type="text/javascript" src="js/jquery.dimensions.js"></script>
<script type="text/javascript" src="js/jquery.tooltip.min.js"></script>

Примечание. Все необходимые файлы находятся в архиве с библиотекой.

Теперь можно создавать подсказки.

Самый простой вариант:

$('#element_id').tooltip();

По-умолчанию, текст подсказки будет взят из атрибута title элемента, для которого она создается. При этом к нему будет добавлено значение атрибутов href или src, т.е. ссылка.

Естественно, в большинстве случаев ссылка только портит вид подсказки (особенно, если она длинная). Поэтому предусмотрена возможность ее удаления:

$('#element_id').tooltip({showURL: false});

Как видите, в первом параметре функции tooltip в фигурных скобках можно указать настройки отображения подсказок.

Рассмотрим еще несколько примеров.

$('#element_id').tooltip({delay: 0});

Убираем задержку перед появлением подсказки.

$('#element_id').tooltip({track: true});

Заставляет подсказку двигаться за указателем мыши.

$('#element_id').tooltip({top: -20, left: -30});

Эти два параметра задают смещение подсказки относительно указателя мыши.

Но самой полезной опцией, на мой взгляд, является возможность использовать текст любого блока на странице в качестве подсказки.

Прежде всего, создаем этот блок.

<div id="myTip" class="hide">Здесь может находиться <strong>текст</strong> с произвольной разметкой</div>

В данном случае он содержит обычную строку, в которой слово текст выделено жирным шрифтом.

Теперь создаем CSS правило, которое спрячет этот блок:

.hide {
	display: none;
}

И, наконец, создаем подсказку:

$("#elementWithTip").tooltip({
	bodyHandler: function(){
		return $("#myTip")[0].innerHTML;
	},
	showURL: false
});

Разберем этот фрагмент кода.

Функцию tooltip мы вызываем для элемента, к которому нужно добавить подсказку (в данном примере этот элемент имеет id="elementWithTip").

Первая опция называется bodyHandler. Она позволяет задать любой произвольный текст подсказки. В качестве значения мы передаем ей результат выполнения анонимной функции (строки 2-4). Эта функция просто возвращает содержимое блока myTip.

О второй опции я уже писал. Она удаляет ссылку из подсказки.

Оформление подсказок.

При желании можно изменить дизайн подсказки до неузнаваемости 🙂 . В смысле так чтобы она идеально подходила к оформлению вашей страницы.

Все, что нужно – это создать необходимые стили (CSS).

Разметка подсказки имеет вид:

<div id="tooltip" style="display: none; left: ...px; right: auto; top: ...px;" class="">
	<h3 style="display: none;"/>
	<div class="body">Текст подсказки.</div>
	<div class="url" style="display: none;"/>
</div>

Как видите, блок с подсказкой имеет id="tooltip" и атрибут style. Сразу обратите внимание на правило display:none. Это правило библиотека добавляет, когда подсказка не видна.

Кроме того, для нормального отображения подсказки нужно определить еще несколько стилей:

#tooltip {
	position: absolute;
	z-index: 3000;
	border: 1px solid #111;
	background-color: #eee;
	padding: 5px;
	opacity: 0.85;
	font-size: 0.8em;
}

#tooltip h3, #tooltip div { margin: 0; }

Обязательными здесь являются правила position и z-index.

Переходим к тексту подсказки. Для его размещения предусмотрены 3 блока.

1) Тег h3 – заголовок подсказки. Создается автоматически, если задана опция showBody. Её значением должен быть разделитель между заголовком и основным текстом.
Например: showBody: " - ". В этом случае если текст подсказки записан так: «Заголовок – Основной текст», то слово «Заголовок» будет находиться внутри тега h3, а фраза «Основной текст» — внутри <div class="body">.

2) div class="body" — блок основной части текста подсказки.

3) div class="url" – блок для ссылки (если она есть).

Думаю, принцип ясен. Используя таблицы стилей (CSS) можно легко изменить дизайн подсказки.

Как видите, библиотека достаточно удобная. От вас требуется минимум работы: написать текст подсказок, «привязать» подсказки к элементам web страницы и оформить их (при необходимости).

Полный перечень опций библиотеки находится здесь.

Если есть вопросы – пишите в комментариях.

До встречи!

  • Sam

    Плагин Dimensions не надо! Он в ядре давно.

    • Если я отключаю этот плагин, то вылазит ошибка
      $(window).scrollLeft is not a function
      Правда, подсказки работают.

  • Sam

    Плагин Dimensions не надо! Он в ядре давно.

    • Если я отключаю этот плагин, то вылазит ошибка
      $(window).scrollLeft is not a function
      Правда, подсказки работают.

  • Полезная вещь, спасибо! Постараюсь реализовать на своем сайте.

  • Полезная вещь, спасибо! Постараюсь реализовать на своем сайте.

  • Pingback: Блог web-мастера » Архив сайта » Всплывающие подсказки: плагин BetterTip для jQuery()

  • У меня подсказка отображается внизу страницы что не так? Уже все вроде б перещупал!

    • Проверьте, применяется ли правило
      position: absolute;

      Если не получится — присылайте мне вашу страницу (с кодом и стилями).

      • Владимир может поможете реализовать. Мне нудно, стоб при наведении на картинку, выскакивала еще одна небольшая картиночка. Как это сделать не мойму.

        • Посмотрите на этой странице третий сверху пример. Это то, что вам нужно?

          Если да, то там же и код приведен 😉
          Идея в том, что вы можете показать любой html код в подсказке. Чтобы показать рисунок, нужно в этот код вставить тег img.

  • У меня подсказка отображается внизу страницы что не так? Уже все вроде б перещупал!

    • Проверьте, применяется ли правило
      position: absolute;

      Если не получится — присылайте мне вашу страницу (с кодом и стилями).

      • Владимир может поможете реализовать. Мне нудно, стоб при наведении на картинку, выскакивала еще одна небольшая картиночка. Как это сделать не мойму.

        • Посмотрите на этой странице третий сверху пример. Это то, что вам нужно?

          Если да, то там же и код приведен 😉
          Идея в том, что вы можете показать любой html код в подсказке. Чтобы показать рисунок, нужно в этот код вставить тег img.

  • Спасибо за скорую помощь, но я вчерп родолжил поиски, и обнаружил что после подключения следующего


    все заработало хорошо.

    Про absolute уже не пробовал.

    • После подключения чего? Тоже внизу страницы отображается 🙁

    • После подключения стилей jquery.tooltip.css !! 🙂

  • Спасибо за скорую помощь, но я вчерп родолжил поиски, и обнаружил что после подключения следующего


    все заработало хорошо.

    Про absolute уже не пробовал.

    • После подключения чего? Тоже внизу страницы отображается 🙁

    • После подключения стилей jquery.tooltip.css !! 🙂

  • fly

    Добрый день, у меня такой вопрос:
    прописываю вот такой код:

    $(document).ready(function(){
    $(”select”).tooltip({
    track: true,
    delay: 100,
    showBody: “::”,
    opacity: 0.85
    });
    });

    все работает просто замечательно до тех пор пока не добавиш disabled в select неподскажете как этого избежать что бы с отключеным элементом подсказка так же появлялась?

    • Каким образом вы добавили disabled в select?
      Я попробовал так:
      $('#mysel').attr(«disabled», true);
      И подсказки нормально отображаются.

  • fly

    Добрый день, у меня такой вопрос:
    прописываю вот такой код:

    $(document).ready(function(){
    $(”select”).tooltip({
    track: true,
    delay: 100,
    showBody: “::”,
    opacity: 0.85
    });
    });

    все работает просто замечательно до тех пор пока не добавиш disabled в select неподскажете как этого избежать что бы с отключеным элементом подсказка так же появлялась?

    • Каким образом вы добавили disabled в select?
      Я попробовал так:
      $('#mysel').attr(«disabled», true);
      И подсказки нормально отображаются.

  • а откуда скачать саму библиотеку? о_О

  • а откуда скачать саму библиотеку? о_О

  • m00n

    Добрый вечер, у меня следующий вопрос…
    прописываю код:

    $(document).ready(function(){
    $(function() {
    $('*').tooltip({
    track: true,
    delay: 0,
    showURL: false,
    showBody: " - ",
    fade: 250
    });
    });
    }

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

    <a href="delete.php" rel="nofollow">

    </a>
    ничего не выходит… надеюсь на помощь…

    • Не могу точно сказать в чем ошибка у вас. Не понятно почему вы выбираете все элементы $('*') и у ссылки отсутствует атрибут title, который используется для создания текста подсказки.

      В любом случае у меня вполне нормально работает такой код:
      $(function() {
      $('a').tooltip();
      });
      и ссылка
      <a href=»#» title=»Привет»><img src=»my.gif» alt=»картинка»></a>
      Подсказка при этом содержит слово привет.

  • m00n

    Добрый вечер, у меня следующий вопрос…
    прописываю код:

    $(document).ready(function(){
    $(function() {
    $('*').tooltip({
    track: true,
    delay: 0,
    showURL: false,
    showBody: " - ",
    fade: 250
    });
    });
    }

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

    <a href="delete.php" rel="nofollow">

    </a>
    ничего не выходит… надеюсь на помощь…

    • Не могу точно сказать в чем ошибка у вас. Не понятно почему вы выбираете все элементы $('*') и у ссылки отсутствует атрибут title, который используется для создания текста подсказки.

      В любом случае у меня вполне нормально работает такой код:
      $(function() {
      $('a').tooltip();
      });
      и ссылка
      <a href=»#» title=»Привет»><img src=»my.gif» alt=»картинка»></a>
      Подсказка при этом содержит слово привет.

  • SMiX

    У меня почему-то тултипы начинают сразу отображаться у всех элементов, у которых есть аттрибут title
    Вызов метода tooltip() у элементов затирает аттрибут title и убирает эффект тултипа, таким образом я не могу задать дополнительные опции для тултипов..

    • Атрибут title используется по-умолчанию. Т.е. если вы явно не указываете текст подсказки, он будет взят из title.
      Как метод tooltip() затирает атрибут title и убирает эффект тултипа я, честно говоря, не понял. Нужно взглянуть на ваш код. Или попробуйте запустить демонстрационные примеры на оф.сайте. Там же приведен и их код.

  • SMiX

    У меня почему-то тултипы начинают сразу отображаться у всех элементов, у которых есть аттрибут title
    Вызов метода tooltip() у элементов затирает аттрибут title и убирает эффект тултипа, таким образом я не могу задать дополнительные опции для тултипов..

    • Атрибут title используется по-умолчанию. Т.е. если вы явно не указываете текст подсказки, он будет взят из title.
      Как метод tooltip() затирает атрибут title и убирает эффект тултипа я, честно говоря, не понял. Нужно взглянуть на ваш код. Или попробуйте запустить демонстрационные примеры на оф.сайте. Там же приведен и их код.

  • Vahan

    У меня проблема с установкой размера шрифта и прозрачности фона. На локальном ПК все работает, на сервере нет. Плиз помогите

  • Vahan

    У меня проблема с установкой размера шрифта и прозрачности фона. На локальном ПК все работает, на сервере нет. Плиз помогите

  • Vahan

    Извините, проблема была в другом, на самом деле в Опера все работает в IE нет, т.е. ни размер шрифта ни прозрачность не меняются

  • Vahan

    Извините, проблема была в другом, на самом деле в Опера все работает в IE нет, т.е. ни размер шрифта ни прозрачность не меняются

  • Vahan

    Извините, ошибся, проблема в другом. В Опера размер шрифта и прозрачность фона устанавливается, а в IE нет. Помогите пожалуйста.

  • Vahan

    Извините, ошибся, проблема в другом. В Опера размер шрифта и прозрачность фона устанавливается, а в IE нет. Помогите пожалуйста.

  • Vahan

    http://www.ebibla.ru/test.htm

    Вот пример

  • Vahan

    http://www.ebibla.ru/test.htm

    Вот пример

  • Vahan

    Вроде все заработало, у меня страницы не обновлялись нормально

    • 🙂 Используйте FF, в нем удобный сброс кеша.

  • Vahan

    Вроде все заработало, у меня страницы не обновлялись нормально

    • 🙂 Используйте FF, в нем удобный сброс кеша.

  • Дмитрий Глазков
    • Этот код нужно писать не в css, а в js файл.
      Т.е. создать файл myscript.js, разместить в нем код, и подключить его в заголовке страницы.

      <script type="text/javascript" src="myscript.js"></script>

      этого достаточно?

      Вполне.

  • Дмитрий Глазков
    • Этот код нужно писать не в css, а в js файл.
      Т.е. создать файл myscript.js, разместить в нем код, и подключить его в заголовке страницы.

      <script type="text/javascript" src="myscript.js"></script>

      этого достаточно?

      Вполне.

  • Ирина

    А как быть, если нужно использовать area?
    Проблема в том, что подсказки в ие в area не всплывают. можно как то это побороть?

    • Да, вы правы, не работает.
      Можно попробовать использовать hover
      $('#textarea_id').hover(
      function() {
      //курсор над textarea
      },
      function() {
      //курсор вышел из зоны textarea
      }
      );

  • Ирина

    А как быть, если нужно использовать area?
    Проблема в том, что подсказки в ие в area не всплывают. можно как то это побороть?

    • Да, вы правы, не работает.
      Можно попробовать использовать hover
      $('#textarea_id').hover(
      function() {
      //курсор над textarea
      },
      function() {
      //курсор вышел из зоны textarea
      }
      );

  • Ирина

    ага…
    Спасибо 🙂

  • Ирина

    ага…
    Спасибо 🙂

  • Dom

    Классная статья!

  • Dom

    Классная статья!

  • и снова меня спасла эта статья! =)
    Еще раз спасибо за доходчивое объяснение.

  • и снова меня спасла эта статья! =)
    Еще раз спасибо за доходчивое объяснение.

  • KIVagant

    Не знаете, случайно, как совместить плагин tooltip с плагином thumbnailviewer? Собственно, проблема в том, что tooltip затирает тайтлы у ссылок, которые нужно не только ему. Как научить его не затирать тайтл ?

    • Честно говоря, не сталкивался с этой проблемой. Попробуйте поиграться с параметрами.

      На оф.сайте есть интересный комментарий

      Its great plugin!!
      But sometimes, I need dynamic tool tip message.

      so in the begining of the function “save()”, I add little hack.

      if( settings.injectFunc ){
      oldTitle = title = settings.injectFunc(source);
      } else {
      oldTitle = title = source.attr('title');
      }

      $(«label»).Tooltip({injectFunc:myFunction});

      so now tooltip shows result of “myFunction” method, if there is injectFunc parameter. Easy to add image, html, and embed flash inside tooltip.

      anyway thanks for your cool tooltip!

      Попробуйте.

  • KIVagant

    Не знаете, случайно, как совместить плагин tooltip с плагином thumbnailviewer? Собственно, проблема в том, что tooltip затирает тайтлы у ссылок, которые нужно не только ему. Как научить его не затирать тайтл ?

    • Честно говоря, не сталкивался с этой проблемой. Попробуйте поиграться с параметрами.

      На оф.сайте есть интересный комментарий

      Its great plugin!!
      But sometimes, I need dynamic tool tip message.

      so in the begining of the function “save()”, I add little hack.

      if( settings.injectFunc ){
      oldTitle = title = settings.injectFunc(source);
      } else {
      oldTitle = title = source.attr('title');
      }

      $(«label»).Tooltip({injectFunc:myFunction});

      so now tooltip shows result of “myFunction” method, if there is injectFunc parameter. Easy to add image, html, and embed flash inside tooltip.

      anyway thanks for your cool tooltip!

      Попробуйте.

  • Арман

    А можно ли внутри подсказки поставить блок, в котором есть функция PHP include?

  • Арман

    А можно ли внутри подсказки поставить блок, в котором есть функция PHP include?

  • Арман

    или что бы в внутри подсказки был блок, в котором находился текст, который брался бы из данных(например base.dat)

    • Нет, подсказки создаются с помощью JavaScript, т.е. на стороне клиента (браузером).
      Но вашу проблему можно решить. Например, при создании страницы (page.php) получать текст полей title из базы.

  • Арман

    или что бы в внутри подсказки был блок, в котором находился текст, который брался бы из данных(например base.dat)

    • Нет, подсказки создаются с помощью JavaScript, т.е. на стороне клиента (браузером).
      Но вашу проблему можно решить. Например, при создании страницы (page.php) получать текст полей title из базы.

  • Арман

    Спасибо за ответ! Не подскажите как это можно написать? Я пробывал через прототип но там кодировка почему то не проходит. В CSS прописывал @charset «windows-1251»;

  • Арман

    Спасибо за ответ! Не подскажите как это можно написать? Я пробывал через прототип но там кодировка почему то не проходит. В CSS прописывал @charset «windows-1251»;

  • Я не совсем понял причем тут кодировка. В прошлый раз вы спрашивали о получении данных из базы.

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

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

  • Я не совсем понял причем тут кодировка. В прошлый раз вы спрашивали о получении данных из базы.

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

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

  • Арман

    спасибо

  • Арман

    спасибо

  • ecolora

    Сперва вопрос: подскажите, пожалуйста, каким образом можно принудительно вызвать всплывающую подсказку у какого-то элемента формы, например, при нажатии кнопки на форме.

    Ответ Арману (если я правильно понял вопрос):

    У меня такой пример:

    Есть в форме f1 комбобокс, часть кода которого:


    ...

    В скриптах есть функция, которая принимает указатель на комбобокс:

    function checks(sid) {
    $.ajax({type: "POST",
    url: "checks.php",
    data: {sid: sid.value},
    success: function(msg){
    sid.title = msg;
    }
    });
    }

    Кстати, пример взят из википедии

    И, наконец, есть файл checks.php, который получает методом POST переменную sid, что-то с ней делает и возвращает текст (просто через php-функцию echo).

    В файл checks.php можете вставлять что угодно… соединение с базой, инклуды других пхп-файлов и т.п.

    Ну ещё в файл пхп с формой в заголовок вставил:


    $(function() {
    $("#sid").tooltip({track: true, delay: 0, showURL: false, fixPNG: true});
    });

    Но последнее, прямого отношения к вопросу не имеет.

    P.S. Прошу прощения за мой английский, вернее, jquery-вский, так как считаю себя начинающим пользователем этой изумительной (экономит время) библиотеки. 🙂

    • ecolora

      Код комбобокса (в первый раз не вставился почему-то):

      • ecolora

        Код комбобокса (повторно):

        < select size="1" id="sid" name="sid" onChange="checks(document.forms['f1'].elements['sid'])">

    • Я не нашел подходящей функции в документации к плагину.
      В любом случае, на мой взгляд, это не очень удачное решение использовать именно этот плагин в такой ситуации. Он создавался немного для других целей.
      Вам проще будет вручную написать обработчик события click для кнопки, который будет вставлять/убирать в нужное вам место на странице подсказку.
      Если будут вопросы, пишите, постараюсь помочь 😉

  • Сперва вопрос: подскажите, пожалуйста, каким образом можно принудительно вызвать всплывающую подсказку у какого-то элемента формы, например, при нажатии кнопки на форме.

    Ответ Арману (если я правильно понял вопрос):

    У меня такой пример:

    Есть в форме f1 комбобокс, часть кода которого:


    ...

    В скриптах есть функция, которая принимает указатель на комбобокс:

    function checks(sid) {
    $.ajax({type: "POST",
    url: "checks.php",
    data: {sid: sid.value},
    success: function(msg){
    sid.title = msg;
    }
    });
    }

    Кстати, пример взят из википедии

    И, наконец, есть файл checks.php, который получает методом POST переменную sid, что-то с ней делает и возвращает текст (просто через php-функцию echo).

    В файл checks.php можете вставлять что угодно… соединение с базой, инклуды других пхп-файлов и т.п.

    Ну ещё в файл пхп с формой в заголовок вставил:


    $(function() {
    $("#sid").tooltip({track: true, delay: 0, showURL: false, fixPNG: true});
    });

    Но последнее, прямого отношения к вопросу не имеет.

    P.S. Прошу прощения за мой английский, вернее, jquery-вский, так как считаю себя начинающим пользователем этой изумительной (экономит время) библиотеки. 🙂

    • Код комбобокса (в первый раз не вставился почему-то):

      • Код комбобокса (повторно):

        < select size="1" id="sid" name="sid" onChange="checks(document.forms['f1'].elements['sid'])">

    • Я не нашел подходящей функции в документации к плагину.
      В любом случае, на мой взгляд, это не очень удачное решение использовать именно этот плагин в такой ситуации. Он создавался немного для других целей.
      Вам проще будет вручную написать обработчик события click для кнопки, который будет вставлять/убирать в нужное вам место на странице подсказку.
      Если будут вопросы, пишите, постараюсь помочь 😉

  • Как заставить подсказку всплыть над элементом? Есть решения от jQuery? Я знаю про библиотеку Overlib, но не хотелось бы использовать решения от множества разработчиков.

    • Можно попробовать использовать параметры top и left. Выставить их с учетом размера подсказки. И если не хотите, чтобы подсказка двигалась за курсором track:false.

  • Как заставить подсказку всплыть над элементом? Есть решения от jQuery? Я знаю про библиотеку Overlib, но не хотелось бы использовать решения от множества разработчиков.

    • Можно попробовать использовать параметры top и left. Выставить их с учетом размера подсказки. И если не хотите, чтобы подсказка двигалась за курсором track:false.

  • videns

    Как-то криво работает, если я использую в javascript переменные.

    Есть два элемента.

    Я делаю

    queue_name = «111»;

    jQuery(«#queue_» + queue_name).tooltip({
    bodyHandler: function() {
    return jQuery(«#queue_fullcont_» + queue_name)[0].innerHTML;
    },
    showURL: false
    });

    Затем
    queue_name = «222»;
    jQuery(«#queue_» + queue_name).tooltip({
    bodyHandler: function() {
    return jQuery(«#queue_fullcont_» + queue_name)[0].innerHTML;
    },
    showURL: false
    });

    В итоге при наведении на оба элемента всплывает последняя подсказка. Связано как раз с использованием переменных в имени. Как можно бороться с этим?

    • Использовать разные имена переменных. Вы присваиваете одной и той же переменной два разных значения, естественно, сохраняется последнее.

  • videns

    Как-то криво работает, если я использую в javascript переменные.

    Есть два элемента.

    Я делаю

    queue_name = «111»;

    jQuery(«#queue_» + queue_name).tooltip({
    bodyHandler: function() {
    return jQuery(«#queue_fullcont_» + queue_name)[0].innerHTML;
    },
    showURL: false
    });

    Затем
    queue_name = «222»;
    jQuery(«#queue_» + queue_name).tooltip({
    bodyHandler: function() {
    return jQuery(«#queue_fullcont_» + queue_name)[0].innerHTML;
    },
    showURL: false
    });

    В итоге при наведении на оба элемента всплывает последняя подсказка. Связано как раз с использованием переменных в имени. Как можно бороться с этим?

    • Использовать разные имена переменных. Вы присваиваете одной и той же переменной два разных значения, естественно, сохраняется последнее.

  • Елена

    Добрый день.
    А у меня вопрос на счет позиционирования подсказки: она позиционируется абсолютно относительно курсора. но использовать можно значения только top и left. Мне необходимо чтобы подсказка была сверху курсора, можно ли как то спозиционировать с помощью bottom? вариант например top:-120px не подходит, так как высота подсказки имеет неопределенное значение в зависимости от внутреннего содержимого.

  • Елена

    Добрый день.
    А у меня вопрос на счет позиционирования подсказки: она позиционируется абсолютно относительно курсора. но использовать можно значения только top и left. Мне необходимо чтобы подсказка была сверху курсора, можно ли как то спозиционировать с помощью bottom? вариант например top:-120px не подходит, так как высота подсказки имеет неопределенное значение в зависимости от внутреннего содержимого.

  • Елена

    Извините, быстро просмотрела комменты и не увидела что уже был подобный вопрос.
    Смогла это исправить правкой в jquery.tooltip.js, пришлось вычесть высоту тултипа… а вот как исправить это извне не знаю, ведь подсказка создается и позиционируется в этом js файле…

    • Подсказка — это обычный блок с абсолютным позиционированием. Посмотрите (с помощью firebug) какой у него id и вы сможете получить его с помощью $('#tooltip_id'). После этого можно определить высоту изменить положение блока.

  • Елена

    Извините, быстро просмотрела комменты и не увидела что уже был подобный вопрос.
    Смогла это исправить правкой в jquery.tooltip.js, пришлось вычесть высоту тултипа… а вот как исправить это извне не знаю, ведь подсказка создается и позиционируется в этом js файле…

    • Подсказка — это обычный блок с абсолютным позиционированием. Посмотрите (с помощью firebug) какой у него id и вы сможете получить его с помощью $('#tooltip_id'). После этого можно определить высоту изменить положение блока.

  • Сергей

    Здравствуйте. Меня интересует одна вещь. (сама я только новичок в этом деле, но смысл понимаю)
    Опишу свою ситуацию.
    Я хочу сделать вывод статей с использованием данного эффекта.
    http://jquery.bassistance.de/tooltip/demo/ 3 или 4 пример
    У меня стоит CMS Joostina.
    Имеется модуль вывода новостей.
    Хотел сделать чтобы выводились только картинки. А при наведении на них высвечивалась сама новость. Сложно ли прикрутить этот эффект? (желательно 4 пример)
    Модуль уже умеет выводить саму новость, дату, заголовок и т.д. только нужно сделать это во всплывающем окне.
    Спасибо.
    Если надо, могу кинуть код модуля, а вы только намекнёте куда крутить =)

    • Ставить Joostina и ковыряться в ней я не буду, расскажу только общий принцип.
      Нужно сделать 4 вещи.
      1) Подключить jQuery и этот плагин.
      2) Текст новости (который должен появляться в подсказке) заключить в теги вроде <div id=»myTip» class=»hide»>. Для этого, скорее всего, придется настроить модуль.
      3) Вставить js код, который создает подсказку. Можно взять из этой статьи.
      4) Подключить CSS стили. Именно с их помощью блоки с классом hide становятся невидимыми. (можно взять из этой статьи или примеров на офф. сайте).

      • Сергей

        Нет. Вы не поняли. =)
        Не нужно ничего ставить. Вот часть кода которая показывает текст.

        <?php if($params->get('text',0)): ?>
        <?php echo $row->text;?>
        <?php endif; ?>

        Как мне правильно вставить описанные вами теги?
        Остальное по томуже принципу. Мне только понять как =) Это моя первая попытка реализовать данный пример.
        Мне нужно заключать следующим образом?

        <div id="myTip" class="hide"><?php if($params->get('text',0)): ?>
        <?php echo $row->text;?>
        <?php endif; ?></div>

        так?

        • Можно и так, но, наверное, лучше будет так:

          <?php if($params->get('text',0)): ?>
          <div id="myTip" class="hide"><?php echo $row->text;?></div>
          <?php endif; ?>

          Чтобы теги не отображались если текста нет.

  • Сергей

    Здравствуйте. Меня интересует одна вещь. (сама я только новичок в этом деле, но смысл понимаю)
    Опишу свою ситуацию.
    Я хочу сделать вывод статей с использованием данного эффекта.
    http://jquery.bassistance.de/tooltip/demo/ 3 или 4 пример
    У меня стоит CMS Joostina.
    Имеется модуль вывода новостей.
    Хотел сделать чтобы выводились только картинки. А при наведении на них высвечивалась сама новость. Сложно ли прикрутить этот эффект? (желательно 4 пример)
    Модуль уже умеет выводить саму новость, дату, заголовок и т.д. только нужно сделать это во всплывающем окне.
    Спасибо.
    Если надо, могу кинуть код модуля, а вы только намекнёте куда крутить =)

    • Ставить Joostina и ковыряться в ней я не буду, расскажу только общий принцип.
      Нужно сделать 4 вещи.
      1) Подключить jQuery и этот плагин.
      2) Текст новости (который должен появляться в подсказке) заключить в теги вроде <div id=»myTip» class=»hide»>. Для этого, скорее всего, придется настроить модуль.
      3) Вставить js код, который создает подсказку. Можно взять из этой статьи.
      4) Подключить CSS стили. Именно с их помощью блоки с классом hide становятся невидимыми. (можно взять из этой статьи или примеров на офф. сайте).

      • Сергей

        Нет. Вы не поняли. =)
        Не нужно ничего ставить. Вот часть кода которая показывает текст.

        <?php if($params->get('text',0)): ?>
        <?php echo $row->text;?>
        <?php endif; ?>

        Как мне правильно вставить описанные вами теги?
        Остальное по томуже принципу. Мне только понять как =) Это моя первая попытка реализовать данный пример.
        Мне нужно заключать следующим образом?

        <div id="myTip" class="hide"><?php if($params->get('text',0)): ?>
        <?php echo $row->text;?>
        <?php endif; ?></div>

        так?

        • Можно и так, но, наверное, лучше будет так:

          <?php if($params->get('text',0)): ?>
          <div id="myTip" class="hide"><?php echo $row->text;?></div>
          <?php endif; ?>

          Чтобы теги не отображались если текста нет.

  • Сергей

    Спрятать у меня получилось. А как сделать чтобы текст появлялся при наведении на фото? Чёт я весь вечер кручу и ничего не получается((
    Мне изображение тоже в дивы заключать и присваивать любой ид? А как заставить появляться текст при наведении на изображение…..

    • Не видя кода сложно сказать что не работает. Идея в том, что при наведении на картинку должен изменяться CSS класс у блока с текстом (при этом блок становится видимым). Поэтому лучше всего проверять firebug'ом. При этом в первую очередь проверить, установлен ли обработчик клика по картинке (устанавливается с помощью tooltip).

  • Сергей

    Спрятать у меня получилось. А как сделать чтобы текст появлялся при наведении на фото? Чёт я весь вечер кручу и ничего не получается((
    Мне изображение тоже в дивы заключать и присваивать любой ид? А как заставить появляться текст при наведении на изображение…..

    • Не видя кода сложно сказать что не работает. Идея в том, что при наведении на картинку должен изменяться CSS класс у блока с текстом (при этом блок становится видимым). Поэтому лучше всего проверять firebug'ом. При этом в первую очередь проверить, установлен ли обработчик клика по картинке (устанавливается с помощью tooltip).

  • Максим

    У меня таже проблема что и у Сергея…
    Я не пойму как правильно прикрутить.
    Поправьте если не так что-то:

    1) подключаю библиотеку
    2) Заношу в дивы появляющийся текст(подсказку)
    Текст
    В CSS прописываю:

    .hide {display: none;}
    Текст скрылся…
    Далее…
    3) Имеется какое-то поле, при наведении на которое должен появиться текст, который находиться в классе «hide»:
    Тыры пыры… (Любое содержимое)

    Просто сверху посты тех, кто в этом разбирается.. Я читал, читал, так и не понял как это всё заставить работать… Объясните на доступном уровне для новичков… Очень хочется =)
    Я вообще использую плагин: Simpletip, но думаю принцип тотже =) Буду ждать ответ

    • Для поля к которому мы создаем подсказку нужно вызвать метод tooltip (или Simpletip). В параметрах этого метода должен быть указан div с подсказкой (девятый блок кода в этой статье).

      Этот метод назначет обработчик, который при наведении на элемент:
      1) убирает класс hide у div'а;
      2) позиционирует div (с помощью top и left).

      Т.е. вам нужно с помощью firebug проследить как меняются классы у div'ов с подсказками.

  • Максим

    У меня таже проблема что и у Сергея…
    Я не пойму как правильно прикрутить.
    Поправьте если не так что-то:

    1) подключаю библиотеку
    2) Заношу в дивы появляющийся текст(подсказку)
    Текст
    В CSS прописываю:

    .hide {display: none;}
    Текст скрылся…
    Далее…
    3) Имеется какое-то поле, при наведении на которое должен появиться текст, который находиться в классе «hide»:
    Тыры пыры… (Любое содержимое)

    Просто сверху посты тех, кто в этом разбирается.. Я читал, читал, так и не понял как это всё заставить работать… Объясните на доступном уровне для новичков… Очень хочется =)
    Я вообще использую плагин: Simpletip, но думаю принцип тотже =) Буду ждать ответ

    • Для поля к которому мы создаем подсказку нужно вызвать метод tooltip (или Simpletip). В параметрах этого метода должен быть указан div с подсказкой (девятый блок кода в этой статье).

      Этот метод назначет обработчик, который при наведении на элемент:
      1) убирает класс hide у div'а;
      2) позиционирует div (с помощью top и left).

      Т.е. вам нужно с помощью firebug проследить как меняются классы у div'ов с подсказками.

  • Сергей

    Всё =)
    Нашёл проблему и решил.
    Теперь вопрос в другом.
    Меня интересует момент где производиться вывод блока (девятый блок кода).
    Как сделать чтобы ещё выводимый контент двигался за показателем и плавно появлялся?

  • Сергей

    Всё =)
    Нашёл проблему и решил.
    Теперь вопрос в другом.
    Меня интересует момент где производиться вывод блока (девятый блок кода).
    Как сделать чтобы ещё выводимый контент двигался за показателем и плавно появлялся?

  • Сергей

    И с этим разобрался…
    Другая проблема:
    У меня всплывающие подсказки должны генерироваться под генерирующийся контент. Но подсказка работает только на 1-ом объекте. На другие не действует. Вот код:
    $(function() {

    $("#news_nd_popup").tooltip({
    track: true,
    showURL: false,
    fade: 250 ,
    bodyHandler: function(){
    return $("#myTip")[0].innerHTML;
    $('#myTip').tooltip({top: -20, left: -30});
    },
    showURL: false
    });

    });

    • Генерирующиеся блоки — у них должны быть разные id (это требования стандарта).

      Вы создаете подсказку только для одного блока news_nd_popup.

      Добавьте порядковые номера к блокам news_nd_popup_1, news_nd_popup_2, … и класс, например, class=»news_nd_popup».

      И выбирайте элементы по классу.
      $(«.news_nd_popup»).tooltip({

  • Сергей

    И с этим разобрался…
    Другая проблема:
    У меня всплывающие подсказки должны генерироваться под генерирующийся контент. Но подсказка работает только на 1-ом объекте. На другие не действует. Вот код:
    $(function() {

    $("#news_nd_popup").tooltip({
    track: true,
    showURL: false,
    fade: 250 ,
    bodyHandler: function(){
    return $("#myTip")[0].innerHTML;
    $('#myTip').tooltip({top: -20, left: -30});
    },
    showURL: false
    });

    });

    • Генерирующиеся блоки — у них должны быть разные id (это требования стандарта).

      Вы создаете подсказку только для одного блока news_nd_popup.

      Добавьте порядковые номера к блокам news_nd_popup_1, news_nd_popup_2, … и класс, например, class=»news_nd_popup».

      И выбирайте элементы по классу.
      $(«.news_nd_popup»).tooltip({

  • Сергей

    Опишу ситуацию, чтобы бала ясна моя позиция:

    У меня имеется модуль, а у него шаблон(все операции с шаблоном):
    1) подключаю скрипты
    2) задаю id блоку, при наведении на который будет всплывающее окно:
    Ну тут любое содержание(генерируется модулем)
    3)задаю id и класс всплывающему блоку:
    Тут генерируется содержимое
    —————————-
    и данная операция повторяется столько, какое кол-во объектов модуля я выставлю в модуле (т.е. оно всегда может быть разным от 0 и до 100(к примеру))
    Так как правильно сделать?

    • Пункты 2 и 3.
      Если блоков несколько, то id должны изменяться для каждого блока. Например, id=»block_1" и ему соответствует всплывающий блок id=»popup_1". Кроме того, каждому блоку добавляем класс class=»block_with_popup».

      Т.е. у вас получится, например, 50 блоков и 50 подсказок к ним.

      После этого нужно связать блоки с подсказками. Для этого
      1) находим все блоки с классом block_with_popup
      2) для каждого найденного блока:
      2.1) получаем его id
      2.2) вытаскиваем из id порядковый номер и добавляем к нему «popup_» в результате получаем id всплывающего блока
      2.3) связываем текущий блок и соответствующий ему всплывающий блок.

  • Сергей

    Опишу ситуацию, чтобы бала ясна моя позиция:

    У меня имеется модуль, а у него шаблон(все операции с шаблоном):
    1) подключаю скрипты
    2) задаю id блоку, при наведении на который будет всплывающее окно:
    Ну тут любое содержание(генерируется модулем)
    3)задаю id и класс всплывающему блоку:
    Тут генерируется содержимое
    —————————-
    и данная операция повторяется столько, какое кол-во объектов модуля я выставлю в модуле (т.е. оно всегда может быть разным от 0 и до 100(к примеру))
    Так как правильно сделать?

    • Пункты 2 и 3.
      Если блоков несколько, то id должны изменяться для каждого блока. Например, id=»block_1" и ему соответствует всплывающий блок id=»popup_1". Кроме того, каждому блоку добавляем класс class=»block_with_popup».

      Т.е. у вас получится, например, 50 блоков и 50 подсказок к ним.

      После этого нужно связать блоки с подсказками. Для этого
      1) находим все блоки с классом block_with_popup
      2) для каждого найденного блока:
      2.1) получаем его id
      2.2) вытаскиваем из id порядковый номер и добавляем к нему «popup_» в результате получаем id всплывающего блока
      2.3) связываем текущий блок и соответствующий ему всплывающий блок.

  • Сергей

    Да я так примерно и думал =)
    Но сейчас думаю, что лучше будет через модальные реализовать
    Но тем не менее этот способ полез.
    Вопрос есть.
    return $("#myTip")[0].innerHTML; эта часть возвращает блок, только делая его видимым? Или полностью очищаются свойства для данного id?

    • Этот код возвращает содержимое блока подсказки. Потом для этой подсказки плагин устанавливает абсолютное позиционирование, убирается класс hide и т.д.

  • Сергей

    Да я так примерно и думал =)
    Но сейчас думаю, что лучше будет через модальные реализовать
    Но тем не менее этот способ полез.
    Вопрос есть.
    return $("#myTip")[0].innerHTML; эта часть возвращает блок, только делая его видимым? Или полностью очищаются свойства для данного id?

    • Этот код возвращает содержимое блока подсказки. Потом для этой подсказки плагин устанавливает абсолютное позиционирование, убирается класс hide и т.д.

  • Здравствуйте, Владимир,
    А вы случаем не встречались с проблемой когда при всплывании картинки-подсказки в FF (3.5.7) картинка иногда мерцает, то показывается, то нет? Причем чаще проблема возникает когда картинка должна развернуться вниз. Похоже на какой то глюк плагина.

  • Здравствуйте, Владимир,
    А вы случаем не встречались с проблемой когда при всплывании картинки-подсказки в FF (3.5.7) картинка иногда мерцает, то показывается, то нет? Причем чаще проблема возникает когда картинка должна развернуться вниз. Похоже на какой то глюк плагина.

  • А в опере от «проехавшихся» картинок остаются следы.
    Может быть вы подскажете более стабильно работающий плагин?

    • Честно говоря, я не видел таких багов, ни в опере, ни в FF (специально ещё раз проверил).
      Попробуйте использовать подсказки, которые входят в jQuery Tools.

      • Да, jQuery Tools работают гораздо стабильнее. Спасибо за наводку!

  • А в опере от «проехавшихся» картинок остаются следы.
    Может быть вы подскажете более стабильно работающий плагин?

    • Честно говоря, я не видел таких багов, ни в опере, ни в FF (специально ещё раз проверил).
      Попробуйте использовать подсказки, которые входят в jQuery Tools.

      • Да, jQuery Tools работают гораздо стабильнее. Спасибо за наводку!

  • Евгений

    Здравствуйте.

    такой вопрос, если допустим я вставляю такой код:

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

  • Евгений

    Здравствуйте.

    такой вопрос, если допустим я вставляю такой код:

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

  • Евгений

    <div id=»elementWithTip»><a href=»/»><img id=»1" src=»karte.png» height=»200" width=»200"/></a></div>
    <div id=»tooltip» class=»hide»><mg id=»1" src=»karte.png» height=»200" width=»200"/></div>

    <div id=»elementWithTip»><a href=»/»><img id=»2" src=»karte.png» height=»200" width=»200"/></a></div>
    <div id=»tooltip» class=»hide»><img id=»2" src=»karte.png» height=»200" width=»200"/></div>

  • Евгений

    при чем id=»elementWithTip» не может меняться

    • id всех элементов должны быть разными. Это требования стандарта. Нельзя рассчитывать, что плагин будет правильно при этом работать.

  • Евгений

    при чем id=»elementWithTip» не может меняться

    • id всех элементов должны быть разными. Это требования стандарта. Нельзя рассчитывать, что плагин будет правильно при этом работать.

  • Юрий

    Нечего непонял…
    вобщем откуда че качать?
    плиз ссылки нормально дайте:
    вот тебе 1,2,3 модуль
    вот то то впиши.
    а то я накачал выше представленные, у меня вобще страничка зависла на загрузке данных модулей…

    спс. если кто поможет!

    • Скачать нужно три компонента:
      1) библиотека jQuery
      2) плагин Dimensions.
      3) Плагин Tooltip.
      А подключать так, как описано в статье.

      P.S. Посмотрите, какие ошибки выдаёт firebug при загрузке вашей странички.

  • Юрий

    Нечего непонял…
    вобщем откуда че качать?
    плиз ссылки нормально дайте:
    вот тебе 1,2,3 модуль
    вот то то впиши.
    а то я накачал выше представленные, у меня вобще страничка зависла на загрузке данных модулей…

    спс. если кто поможет!

    • Скачать нужно три компонента:
      1) библиотека jQuery
      2) плагин Dimensions.
      3) Плагин Tooltip.
      А подключать так, как описано в статье.

      P.S. Посмотрите, какие ошибки выдаёт firebug при загрузке вашей странички.

  • Армен

    Люди помогите. Бьюсь над проблемой 5-й день.
    Пытаюсь реализовать такую же штуку, только без сторонних бибиотек. Чтоб когда наводишь на выводилась подсказка, но она должна быть реализована с помощью JavaScript и главное(повторюсь)без сторонних библиотек.
    И еще , текст в подсказке должен постоянно менятся на стороне сервера.
    Вобщем, вот это все, что на этой странице показано с помощью jQuery нужно написать «чистым» JavaScript.
    Можно нужно ли добавлять Ajax?
    И с чего вообще начинать?
    Очень нужна помощь, люди добрые.

    • Я не понял фразу «текст в подсказке должен постоянно менятся на стороне сервера». Если текст будет меняться после того, как посетитель открыл страницу, и до того, как он с неё ушел, то нужен ajax.

      И с чего вообще начинать?

      Всё зависит от того, насколько хорошо вы знаете JS на данный момент.

      • Армен

        Трудный вопрос: на сколько знаю я JS 🙂
        а на сколько нужно знать его, чтоб сделать подобное?

        • Как минимум — учебник какой-нибудь о JS почитать (и разобраться во всех примерах) 😉

  • Армен

    Люди помогите. Бьюсь над проблемой 5-й день.
    Пытаюсь реализовать такую же штуку, только без сторонних бибиотек. Чтоб когда наводишь на выводилась подсказка, но она должна быть реализована с помощью JavaScript и главное(повторюсь)без сторонних библиотек.
    И еще , текст в подсказке должен постоянно менятся на стороне сервера.
    Вобщем, вот это все, что на этой странице показано с помощью jQuery нужно написать «чистым» JavaScript.
    Можно нужно ли добавлять Ajax?
    И с чего вообще начинать?
    Очень нужна помощь, люди добрые.

    • Я не понял фразу «текст в подсказке должен постоянно менятся на стороне сервера». Если текст будет меняться после того, как посетитель открыл страницу, и до того, как он с неё ушел, то нужен ajax.

      И с чего вообще начинать?

      Всё зависит от того, насколько хорошо вы знаете JS на данный момент.

      • Армен

        Трудный вопрос: на сколько знаю я JS 🙂
        а на сколько нужно знать его, чтоб сделать подобное?

        • Как минимум — учебник какой-нибудь о JS почитать (и разобраться во всех примерах) 😉

  • Армен

    учебников прочел не мало

    • Армен

      меня просто интересует такой же эффект медленного всплывания подсказки и постепенного угасания. Такое можно сделать на JS ?

      • Реализацию этого эффекта можно посмотреть в библиотеке вроде jQuery (методы fadeIn и fadeOut).

        • Армен

          мне нельзя использовать сторонние библиотеки, код должен быть написан только с помощью JavaScript и все

        • Код использовать нельзя, но что мешает посмотреть их реализацию?

  • Армен

    учебников прочел не мало

    • Армен

      меня просто интересует такой же эффект медленного всплывания подсказки и постепенного угасания. Такое можно сделать на JS ?

      • Реализацию этого эффекта можно посмотреть в библиотеке вроде jQuery (методы fadeIn и fadeOut).

        • Армен

          мне нельзя использовать сторонние библиотеки, код должен быть написан только с помощью JavaScript и все

        • Код использовать нельзя, но что мешает посмотреть их реализацию?

  • Марина

    Здравствуйте уважаемый автор!
    Я недавно начала делать сайт для своей компании, и очень хочу реализовать эти подсказки. Но так как, я не очень разбираюсь в языках jquery, прошу помощи!
    Напишите пожалуйста подробно (это сюда, это туда) как вставить эти подсказки на сайт, чтоб подсказка всплывала именно в виде картинки( как наверху странички нарисовано).ПОЖАЛУЙСТА! и файлы куда закачать (у меня в корне сайта создано папки js и css и images
    Я перепробовала все уже, и вверх html вставляла и вниз, и стили вниз страницы ставила — НИЧЕГО не выходит, не показываются они.
    Может я неправильно именно сами строки подсказки ставлю?
    Очень прошу — НАПИШИТЕ!
    С уважением Марина

    • Дайте, пожалуйста, ссылку на страницу, которую вы делаете. Просто по вашему описанию сложно понять, в чем ошибка 🙂

      • Марина

        Спасибо за ответ!
        Я написала вам письмо, но оно не прошло по вашему адресу
        Вот мой сайт okomfort.ucoz.ru
        Ссылка на страницу Главная okomfort.ucoz.ru/index/0-1

        Вот так в управлении дизайном «Страницы сайта»

        Куда и что вставлять , я уже запуталась
        Если можно, напишите конкретно ЧТО и куда запихивать))) и какие фото и куда, на подсказку саму, надо закачать на сайт
        С ОГРОМНОЙ БЛАГОДАРНОСТЬЮ за ответ
        Марина
        СПАСИБО ВАМ!

        • У вас внизу страницы есть тег
          <div id=»dhtmlgoodies_tooltip» style=»display: none; left: 484px; top: 1380px; width: 116px;»>ПЕРЕХОД НА СТРАНИЦУ</div>
          в котором находится текст подсказки.

          Этот текст нужно заменить на рисунок (тег img).

  • Марина

    Здравствуйте уважаемый автор!
    Я недавно начала делать сайт для своей компании, и очень хочу реализовать эти подсказки. Но так как, я не очень разбираюсь в языках jquery, прошу помощи!
    Напишите пожалуйста подробно (это сюда, это туда) как вставить эти подсказки на сайт, чтоб подсказка всплывала именно в виде картинки( как наверху странички нарисовано).ПОЖАЛУЙСТА! и файлы куда закачать (у меня в корне сайта создано папки js и css и images
    Я перепробовала все уже, и вверх html вставляла и вниз, и стили вниз страницы ставила — НИЧЕГО не выходит, не показываются они.
    Может я неправильно именно сами строки подсказки ставлю?
    Очень прошу — НАПИШИТЕ!
    С уважением Марина

    • Дайте, пожалуйста, ссылку на страницу, которую вы делаете. Просто по вашему описанию сложно понять, в чем ошибка 🙂

      • Марина

        Спасибо за ответ!
        Я написала вам письмо, но оно не прошло по вашему адресу
        Вот мой сайт okomfort.ucoz.ru
        Ссылка на страницу Главная okomfort.ucoz.ru/index/0-1

        Вот так в управлении дизайном «Страницы сайта»

        Куда и что вставлять , я уже запуталась
        Если можно, напишите конкретно ЧТО и куда запихивать))) и какие фото и куда, на подсказку саму, надо закачать на сайт
        С ОГРОМНОЙ БЛАГОДАРНОСТЬЮ за ответ
        Марина
        СПАСИБО ВАМ!

        • У вас внизу страницы есть тег
          <div id=»dhtmlgoodies_tooltip» style=»display: none; left: 484px; top: 1380px; width: 116px;»>ПЕРЕХОД НА СТРАНИЦУ</div>
          в котором находится текст подсказки.

          Этот текст нужно заменить на рисунок (тег img).

  • Марина

    Володя!
    Пожалуйста, напиши этот тег с img ПОЛНОСТЬЮ, как он должен выглядеть для моей страницы. Очень прошу!
    и куда его вставлять, чтоб эта подсказка проявлялась, там где надо(на ссылке)?????
    я наверно тупая))),

    • <div id=»dhtmlgoodies_tooltip» style=»display: none; left: 484px; top: 1380px; width: 116px;»><img src=»filename.jpg» alt=»рисунок» /></div>

      Примерно так.

    • Размещением подсказки занимается плагин. Вам нужно вставить картинку в любое место на странице. CSS стили делают ее невидимой, а когда ее нужно показать в подсказке, плагин рассчитывает ее положение и делает видимой.

  • Марина

    Володя!
    Пожалуйста, напиши этот тег с img ПОЛНОСТЬЮ, как он должен выглядеть для моей страницы. Очень прошу!
    и куда его вставлять, чтоб эта подсказка проявлялась, там где надо(на ссылке)?????
    я наверно тупая))),

    • <div id=»dhtmlgoodies_tooltip» style=»display: none; left: 484px; top: 1380px; width: 116px;»><img src=»filename.jpg» alt=»рисунок» /></div>

      Примерно так.

    • Размещением подсказки занимается плагин. Вам нужно вставить картинку в любое место на странице. CSS стили делают ее невидимой, а когда ее нужно показать в подсказке, плагин рассчитывает ее положение и делает видимой.

  • Марина

    Володя!
    Огромное СПАСИБО Вам!
    Буду пробовать.

  • Марина

    Володя!
    Огромное СПАСИБО Вам!
    Буду пробовать.

  • Марина

    Здравствуйте!
    Промучилась всю ночь и ничего не вышло
    Ни подсказки самой( в виде картинки) не видно, ни ссылки, для которой подсказка(((((
    Володя! Если сделаете одолжение помочь, то напишите пожалуйста, что мне нужно написать здесь
    Спасибо
    Марина

    • Что-то мы топчемся на месте 🙂
      Я сделал скриншот firebug'а, которым я смотрю разметку страницы.
      http://screencast.com/t/YmQ1Nzhh
      Там остались теже теги, что были раньше. Где рисунок (тег img), который должен появиться в подсказке? Он должен быть вставлен в разметку страницы.

    • El Natan

      ПРИВЕТ!!! Как дела?

  • Марина

    Здравствуйте!
    Промучилась всю ночь и ничего не вышло
    Ни подсказки самой( в виде картинки) не видно, ни ссылки, для которой подсказка(((((
    Володя! Если сделаете одолжение помочь, то напишите пожалуйста, что мне нужно написать здесь
    Спасибо
    Марина

    • Что-то мы топчемся на месте 🙂
      Я сделал скриншот firebug'а, которым я смотрю разметку страницы.
      http://screencast.com/t/YmQ1Nzhh
      Там остались теже теги, что были раньше. Где рисунок (тег img), который должен появиться в подсказке? Он должен быть вставлен в разметку страницы.

  • Сегодня обнаружил интересную особенность работы tooltip.

    Например у Вас tooltip должен применяться ко всем элементам на странице.

    Так вот, попробуйте, к примеру, вынести функцию $(function() {
    $('*').tooltip({delay:100,track:true,showURL:false,opacity:0.85});
    });

    в отдельную функцию, например testfunc() и выполнить её 2 раза.

    Зачем это нужно? Ну вот Вы к примеру “подргрузили” часть содержимого с помощью $.ajax() и в этом содержимом у Вас есть элементы, к которым тоже нужно применить tooltip. Как это сделать? ещё раз вызвать функцию testfunc().

    Так вот после второго вызова у нового “вставленного” содержимого подсказки будут, а вот все старые исчезнут!

    Решение заключается в другой конструкции:
    $('*').each( function () {
    if (this.title != ”) $(this)tooltip({delay:100,track:true,showURL:false,opacity:0.85});
    });

    В этом случае tooltip применится только к тем элементам, к которым он ещё не применялся. Тогда будут и новые и старые подсказки.

    • Спасибо, что поделились решением!
      Правда я бы попробовал сделать немного по-другому.
      Допустим ajax метод возвращает разметку в переменной newData. Вы можете преобразовать эту разметку в объект jQuery и назначить ему обработчики, т.е. работает следующий код.

      var ml = $('<a href=»#»>test</a><a href=»#»>test</a>')
      .click(function(){
      alert('111');
      return false;
      });
      $(content).append(ml);

      • натан

        (((ТЫ Попович?)))

  • Сегодня обнаружил интересную особенность работы tooltip.

    Например у Вас tooltip должен применяться ко всем элементам на странице.

    Так вот, попробуйте, к примеру, вынести функцию $(function() {
    $('*').tooltip({delay:100,track:true,showURL:false,opacity:0.85});
    });

    в отдельную функцию, например testfunc() и выполнить её 2 раза.

    Зачем это нужно? Ну вот Вы к примеру “подргрузили” часть содержимого с помощью $.ajax() и в этом содержимом у Вас есть элементы, к которым тоже нужно применить tooltip. Как это сделать? ещё раз вызвать функцию testfunc().

    Так вот после второго вызова у нового “вставленного” содержимого подсказки будут, а вот все старые исчезнут!

    Решение заключается в другой конструкции:
    $('*').each( function () {
    if (this.title != ”) $(this)tooltip({delay:100,track:true,showURL:false,opacity:0.85});
    });

    В этом случае tooltip применится только к тем элементам, к которым он ещё не применялся. Тогда будут и новые и старые подсказки.

    • Спасибо, что поделились решением!
      Правда я бы попробовал сделать немного по-другому.
      Допустим ajax метод возвращает разметку в переменной newData. Вы можете преобразовать эту разметку в объект jQuery и назначить ему обработчики, т.е. работает следующий код.

      var ml = $('<a href="#">test</a><a href="#">test</a>')
      	.click(function(){
      		alert('111');
      		return false;
      	});
      $(content).append(ml);
  • Antibuger

    Здравствуйте. Это довольнно сложный вариант реализации подсказки.

    http://www.eurosites.ru/index.php?page=%D1%F2%E
    Посмотрите все.
    ЭТО НЕ СПАМ.
    СТАТЬЯ АВТОРСКАЯ!

    • натан

      l=(Ты Сума Сашол?

  • Евгений

    олный перечень опций библиотеки находится …
    ссылка не работает

    • Спасибо, похоже какая-то проблема на docs.jquery.com
      При переходе с их сайта ссылка тоже не работает.
      Можно посмотреть только описание плагина
      http://docs.jquery.com/Plugins/Tooltip

  • Юрий

    Не работает. 

    • Что именно?
      Вы можете установить firebug и посмотреть какие ошибки возникают.

  • Рома

    почему подсказка мигает при движении курсора над вызывающим элементом? что сделать чтобы этого не было?

    • Напишите, пожалуйста, какой именно пример с подсказкой вы смотрите и с помощью какого браузера.

  • Avanesov Andrey

    Интересная статья! Кстати если кому интересно есть кросс-браузерный хороший способ на на http://sitemaker.x10.bz/articles.php?id=12

  • Иван

    Не получается внедрить подсказки для элементов выпадающего списка.
    Стандартные подсказки работают, а эти нет.
    Взял за основу страницу http://jquery.bassistance.de/tooltip/demo/
    В коде списка  пишу:
    Selects 1. option 2. option 3. option
    Пробовал менять тэги и местами — без результата.
    Также id и title пробовал задавать для .

    В скрипте:
    $(«#fancy, #fancy1, #fancy2").tooltip({ track: true, delay: 0, showURL: false, fixPNG: true, showBody: » — «, extraClass: «pretty fancy», top: -15, left: 5});

    Подсказка не появляется.
    Что нужно сделать для отображения всплывающей подсказки для элементов выпадающего списка? 

    • Укажите id=»fancy» для select'а. У вас fancy указано в атрибуте title, а tooltip вы создаете для элементов с id=»fancy», id=»fancy1" и id=»fancy2".

      • Иван

        Мне нужны подсказки при наведении на элементы списка, а не на сам список. У меня тэги option содержали тэги span с id=»fancy», id=»fancy1" и id=»fancy2", но форум их выкинул. Эти тэги span я пробовал ставить снаружи тэгов option. Также пробовал менять span  на div.
        А с подсказкой при наведении на сам список проблем нет.

        • По-моему на элементы стандартных списков поставить подсказку нельзя. Обработчики событий назначаются всему списку целиком. Я не видел события, которое позволяет получить option над которым находится курсор когда список развернут.

          Но можно сделать свой собственный вариант выпадающего списка на основе такой структуры.
          <div id=»list»>
              <div class=»option»>…</div>
              <div class=»option»>…</div>
              <div class=»option»>…</div>
          </div>
          Естественно, этот вариант будет работать только при включенном JS.

        • Иван

          А что нужно подключить и(или) написать чтобы данный блок сделать выпадающим списком?

        • Наверное, проще всего взять какой-нибудь плагин для jQuery, например, этот. И, конечно, можно написать самостоятельно на JS.

          Еще можете посмотреть мой скрипт для работы со списком задач. В нём такие списки используются для изменения статуса задачи.

        • Иван

          Большое спасибо!