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

Question

Я новичок в jQuery и стараюсь комбинировать использование плагина tooltip и плагина lightbox. В частности, я использую Colorbox и vtip.

Colorbox генерирует DIV, который отображает изображение, как это:

<div id="cboxLoadedContent" style="display: block; width: 400px; overflow: auto; height: 498px;"> 
<br> 
<img src="image.jpg" id="cboxPhoto" style="margin: 49px auto auto; border: medium none; display: block; float: none; cursor: pointer;"> 
<br> 
</div> 
</code> 

Далее я добавить class="vtip" title="This is a tip." для того, чтобы использовать стиль vtip, но по какой-то причине он не работает, когда это тег заголовка на элементе динамически созданный Colorbox, но работает над тем, что уже загружено на страницу.

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

Answer 1

Ключ находится в нижней части файла vtip:

jQuery(document).ready(function($){vtip();}) 

vtip вызывается в документе готов. Он не знает об элементах, которые вы еще не добавили. Вам нужно вспомнить функцию vtip после добавления ваших элементов.

vtip(); 

PS vtip hasnt был написан как плагин, в противном случае вы могли бы приковать его вместе с другим кодом, например

$('div').append('<a>example</a>').vtip(); //currently this wont work 

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

Answer 2

Если вы не хотите повторять вызов функции каждый раз, когда новый элемент записывается на страницу, я написал обновление для vtip. Я переписал функцию vtip как плагин jQuery, чтобы он был доступен для подключения, чтобы настроить пользовательские настройки и работать с живыми элементами. Он использует отображение событий, поэтому он будет работать с jQuery 1.4.3 и выше.

(function ($) { 
$.fn.vtip = function (options) { 

    var settings = { 
     xOffset: -10, 
     yOffset: 6, 
     arrow: '/images/vtip_arrow.png' 
    }; 
    if (options) $.extend(settings, options); 

    return this.live({ 
     mouseenter: function (a) { 
      this.t = this.title; 
      this.title = ""; 
      this.top = (a.pageY + settings.yOffset); 
      this.left = (a.pageX + settings.xOffset); 
      $("body").append('<p id="vtip"><img id="vtipArrow" />' + this.t + "</p>"); 
      $("p#vtip #vtipArrow").attr("src", settings.arrow); 
      $("p#vtip").css("top", this.top + "px").css("left", this.left + "px").fadeIn("fast"); 
     }, 
     mouseleave: function (a) { 
      this.title = this.t; 
      $("p#vtip").fadeOut("fast").remove(); 
     }, 
     mousemove: function (a) { 
      this.top = (a.pageY + settings.yOffset); 
      this.left = (a.pageX + settings.xOffset); 
      $("p#vtip").css("top", this.top + "px").css("left", this.left + "px"); 
     } 
    }); 
}; 
})(jQuery); 

// You can use it with any class, I'm using the class 'vtip' below. 
$(document).ready(function(){ 
    $('.vtip').vtip(); 
}); 

// If necessary, add custom settings like so: 
$('.vtip').vtip({xOffset:-10,yOffset:10,arrow:'/images/customArrow.png'}); 

Answer 3

Я попробовал код/​​переписан плагин на этой странице и столкнулся с некоторыми сложностями ... возможно, это будет работать лучше для кого-то и сэкономить время:

(function ($) { 
    $.fn.vtip = function (options) { 

    var settings = { 
     xOffset: -10, 
     yOffset: 20, 
     arrow: 'http://simages0.showtimesfast.com/icons2/vtip_arrow.png' 
    }; 
    if (options) $.extend(settings, options); 

    return this.live('mouseover mouseout mousemove', function(a){ 

     if(a.type == 'mouseover'){ 

      this.top = (a.pageY + settings.yOffset); 
      this.left = (a.pageX + settings.xOffset); 
      $("body").append('<p id="vtip"><img id="vtipArrow" />' + this.title + "</p>"); 
      $("p#vtip #vtipArrow").attr("src", settings.arrow); 
      $("p#vtip").css("top", this.top + "px").css("left", this.left + "px").fadeIn("fast"); 

     }else if (a.type == 'mouseout'){ 

      $("p#vtip").fadeOut("fast").remove(); 

     }else if (a.type == 'mousemove'){ 

      this.top = (a.pageY + settings.yOffset); 
      this.left = (a.pageX + settings.xOffset); 
      $("p#vtip").css("top", this.top + "px").css("left", this.left + "px"); 

     } 

    }); 
}; 
})(jQuery); 

В настоящее время используется на http://www.showtimes.ca/, чтобы вы могли видеть его в действии. Благодаря Стиву, когда вы привели меня в правильном направлении для работы с живыми событиями.