Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Jquery toolTip и метод live() (https://javascript.ru/forum/events/29652-jquery-tooltip-i-metod-live.html)

Анатолий Саратовцев 06.07.2012 09:23

Jquery toolTip и метод live()
 
Здравствуйте, уважаемые. Есть плагин jquery tooltip.
Он используется так:
Код:

$('img').tooltip();
Если я подгружаю аяксом элементы в тело документа, то на этих элементах он перестает работать.
Делаю так:
Код:

$('img').live('mouseover', function() {
  $('img').tooltip();
}

Теперь возникла почему-то другая проблема - подсказка появляется только после второго наведения, т.е. один раз навел - ничего нет, отвел от элемента, опять навел - появилось. С чем это может быть связано?

AK666 22.08.2012 19:03

при использовании .on() проблема остается
 
На подгруженные через AJAX элементы использую плагин jquery tooltip ( http://docs.jquery.com/Plugins/Tooltip ).
подключаю так

$('tipsed').on('mouseover', function() {
   $('tipsed').tooltip();
}


проблема точно такая же!

Deff 22.08.2012 19:41

Анатолий Саратовцев,AK666,

При подгрузке - unbindite все подсказки и выставляйте их события по-новой
$('img').di('mouseover')
$('img').live('mouseover', function() {
   $('img').tooltip();
}



$('tipsed').unbind('mouseover');
$('tipsed').on('mouseover', function() { 
   $('tipsed').tooltip(); 
}

AK666 22.08.2012 20:40

не выходит каменный цветок :(
 
Спасибо за Ваш ответ

$('tipsed').unbind('mouseover');
$('tipsed').on('mouseover', function() {
   $('tipsed').tooltip();
}


я так подозреваю, что
$('tipsed').tooltip();

убирает значения title в только ему известное место
а
$('tipsed').unbind('mouseover');

не возвращает :(

подсказанный Вами код я поставил в success метода ajax

Deff 22.08.2012 20:43

AK666,
А вы пробуйте таким макаром - по аякс - кликать программно кнопку(которая неизменна на протяжении загрузок) и по событию её клика - снимать и ставить событие на 'tipsed'

AK666 22.08.2012 20:59

я что на самом деле сказать хотел :)
 
насколько я понял для jquery tooltip ( http://docs.jquery.com/Plugins/Tooltip )
нельзя использовать ни .live() ни .on()

когда я в консоли DeveloperTools хрома (после загрузки странички со всеми динамическими элементами) даю просто команду $('tipsed').tooltip();
то оно работает для всех текущих элементов (а при этом все теги title "исчезают"), и, естественно, не работает для последующе загруженных.
(данные добавляются раз в 10 секунд)

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

я ещё пробовал делать так:

<span onmouseover="_showTooltip(this,'test hint')">Test</span>

function showTooltip(tag,text){
		$(tag).tooltip({
			track: true, 
			delay: 0,
			showURL: false, 
			bodyHandler: function() { 
			        return text; 
			    } 
		});
	};


но тут опять возникает проблема: при первом наведении на текст мыши хинт НЕ показывается, при последующих - показывается БЕЗ проблем.
Если подскажете как в процедуре сразу сделать вызов функции показа - то это тоже очень сильно поможет :)

Deff 22.08.2012 21:04

AK666,
Ну есть jquery.tipsy.min.js

Но он даёт чисто титулы на черном фоне - хотя можно им придать собственный, дополнительный класс и вставить внутрь своё, нужное

dmitrytyt 24.03.2014 16:40

Я сделал по дурацкаму:)
В документации есть метод: method-destroy
По этому при загрузке можно сделать так например:
// Удалить все подсказки
$( ".selector" ).tooltip( "destroy" );


А потом назначить все заново:

$( ".selector" ).tooltip();


Может у кого получилось сделать это по-нормальному?

opus44 26.03.2015 00:59

Где то нашел пример, немного переделал под себя. Все работает без задержек, с первого раза.
/* Всплывающая подсказка
* Для работы нужен заполненный атрибут hint = "[Подсказка]"
* и <div  id="tooltip">
------------------------------------------------------*/
$("[hint]").mousemove(function( eventObject ){    
        $("#tooltip").text($(this).attr("hint"))
            .css({"top" : eventObject.pageY + 5, "left" : eventObject.pageX + 5})
            .show();
        })
        .mouseout(function() {
        $("#tooltip").hide()
            .text("")
            .css({"top" : 0, "left" : 0});
});

п.с. код требует некоторой доработки, в плане если подсказка находится возле края экрана то получается не очень красиво.


Часовой пояс GMT +3, время: 03:13.