Настройка плагина jQuery Tipsy Tooltip

Я использую подключаемый модуль jQuery tipsy для активации всплывающих подсказок при наведении курсора на определенные элементы. В настоящее время всплывающая подсказка появляется в середине элемента, из-за которого она была запущена, но я хотел бы настроить плагин так, чтобы всплывающая подсказка появлялась над соответствующим заголовком. Взгляните на пример, на который я ссылаюсь ниже. Подсказка срабатывает при наведении курсора на весь #everything div, что правильно, но я бы хотел, чтобы всплывающая подсказка появлялась над заголовком.

Пример: http://jsfiddle.net/JqFwP/2/

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

Спасибо.


jquery jquery-plugins tipsy
person conbask    schedule 26.02.2013    source источник

Ответы (3)


arrow_upward
4
arrow_downward

Я не знаком с подвыпившим плагином, но как насчет привязки события mouseenter к #everything?

ЯВАСКРИПТ:

$("#everything").tipsy({
    gravity: 's'
}).mouseenter(function(){
    var top=$(this).find('h2').offset().top - 35,
        left=$(this).find('h2').offset().left - 10;
    $('.tipsy').css({
        'top': top + 'px',
        'left': left + 'px'
    });
});

ДЕМО (один заголовок): http://jsfiddle.net/dirtyd77/JqFwP/16/

ДЕМО (несколько заголовков): http://jsfiddle.net/dirtyd77/JqFwP/17/

ИМХО, я рекомендую вместо этого использовать подсказку jQueryUI. Я чувствую, что это было бы более выгодно. Просто мысль! Дайте знать, если у вас появятся вопросы!

person Dom    schedule 28.02.2013
comment
В итоге я выбрал этот ответ, потому что он более лаконичен и хорошо подходит для моей реализации. - person conbask; 07.03.2013

arrow_upward
0
arrow_downward

Думаю, я понял.

Вам нужно изменить эту переменную pos с:

           var pos = $.extend({}, this.$element.offset(), {
                width: this.$element[0].offsetWidth,
                height: this.$element[0].offsetHeight
            });

to:

           var pos = $.extend({}, this.$element.offset(), {
                width: $(this).children("h2").offsetWidth,
                height: $(this).children("h2").offsetHeight
            });

рабочая скрипка здесь: http://jsfiddle.net/jeremythuff/L9BVc/8/

person Jeremythuff    schedule 05.03.2013

arrow_upward
0
arrow_downward

С моей точки зрения, манипулирование кодом плагина — не лучшее решение. Подход @Dom кажется отличным, но не поддерживает значение «s» для гравитационного атрибута подвыпившего, которое показывает, что всплывающая подсказка в центре элемента подвыпившего была привязана.

Моя первая мысль состояла в том, чтобы обнаружить ввод мыши для контейнера «div» и привязать типси к внутреннему заголовку (h2). Это не сработает для небольших заголовков, так как h2 по умолчанию отображается как блок и занимает 100% элемента контейнера.

Вы должны добавить некоторые стили CSS к заголовку, которые разобьют ваш контент. Поэтому мне удалось создать решение, в котором я оборачиваю содержимое h2 элементом span, чтобы все было чисто и ясно.

Манипулирование исходным HTML

<div id="everything" original-title="The whole kit and caboodle.">
     <h2>Working with really great and awesome headlines</h2>
     ....
</div>

to 

<div id="everything" original-title="The whole kit and caboodle.">
     <h2><span original-title="The whole kit and caboodle.">Working with really great and awesome headlines</span></h2>
</div>

Как минимум, но не в последнюю очередь, я отшлифовал свой код, чтобы связать подсказки только один раз для каждого контейнера div, так как я не смог выяснить, как плагин манипулирует DOM.

Обновленная версия, предложенная @585connor

http://jsfiddle.net/JqFwP/22/

Обновление vol2: есть еще одна проблема с моим подходом: если заголовок слишком короткий, всплывающая подсказка удаляется за пределы DOM. Мне удалось решить эту проблему, используя класс в диапазоне обертывания и некоторый код css.

Доказательство этой проблемы http://jsfiddle.net/JqFwP/25/

Мой обходной путь http://jsfiddle.net/JqFwP/24/

person vorillaz    schedule 05.03.2013
comment
В вашем примере, когда пользователь наводит курсор на заголовок, а затем переходит к основному тексту (в том же div), всплывающая подсказка исчезает. - person conbask; 06.03.2013
comment
Ваш комментарий был прямо в точку. Наведение на заголовок вызывает всплывающую подсказку, а события mouseenter и mouseleave перестают работать. Я добавил дополнительный параметр в типичную инициализацию, чтобы вручную получить типи, как это предлагается в документации, trigger: 'manual' был ключом к исправлению ошибки. Проверьте мою версию на скрипке выше. - person vorillaz; 06.03.2013