Tooltipster does not work in a generated content

javascript jquery tooltip dynamically-generated tooltipster
Lasha Lejava picture Lasha Lejava · Aug 4, 2014 · Viewed 8.2k times · Source

I have installed Tooltipster on my website, but it does not work for content added dynamically.

You can see it in the "SORT GAMES BY YOUR CHOICE (NEWEST GAMES BY DEFAULT)" box, when I select sort by "newest first", "most popular," etc... when the content is generated, Tooltipster does not see that content. Somehow I must tell Tooltipster about that content.

Here is the Tooltipster code:

<head></head>
    <link rel="stylesheet" type="text/css" href="http://www.heroplaysonline.com/css/tooltipster.css" />
    <script type="text/javascript" src="http://www.heroplaysonline.com/js/jquery.tooltipster.min.js"></script>
<script>
    $(document).ready(function() {
        $('.tooltip').tooltipster({
            position: 'bottom-left',
            contentAsHTML: 'true',
            animation: 'grow',
            theme: '.my-custom-theme'
        });
    });
</script>

Here is the script which generates the content:

jQuery(document).ready(function($){
  $.fn.vAlign = function() {
    return this.each(function(i){
      var ah = $(this).height();
      var ph = $(this).parent().height();
      var mh = Math.ceil((ph-ah) / 2);
      $(this).css('margin-top', mh);
    });
  };

  $('#sortable-game-box-order select').change(function() {
    var sorturl = $(this).attr("value");
    var loaderheight = $('#sortable-game-box-inner-content').height();
    $('#sortable-game-box-loader').css('height', loaderheight+13);
    $('#sortable-game-box-loader-content').css('height', loaderheight+13);
    $('#sortable-game-box-loader-content img').vAlign();
    $('#sortable-game-box-list').hide();
    $('#sortable-game-box-loader').show();
    $('#sortable-game-box-inner').load(sorturl + ' #sortable-game-box-inner-content', function() {
      $('#sortable-game-box-loader').hide();
      $('#sortable-game-box-list').show();      
    });
  });
});

Here is the code of js, where content is generated dynamically and tooltipster works, but I could not transform it for mine.

(function($){'use strict';Date.now=Date.now||function(){return+new Date();};$.ias=function(options)
{var opts=$.extend({},$.ias.defaults,options);var util=new $.ias.util();var paging=new $.ias.paging(opts.scrollContainer);var hist=(opts.history?new $.ias.history():false);var _self=this;function call_tooltip()
{$('.tooltip_cls').tooltipster({animation:'grow',theme:'.my-custom-theme'});}
function init()
{call_tooltip();var pageNum;paging.onChangePage(function(pageNum,scrollOffset,pageUrl){if(hist){hist.setPage(pageNum,pageUrl);}
opts.onPageChange.call(this,pageNum,pageUrl,scrollOffset);});reset();if(hist&&hist.havePage()){stop_scroll();pageNum=hist.getPage();util.forceScrollTop(function(){var curTreshold;if(pageNum>1){paginateToPage(pageNum);curTreshold=get_scroll_treshold(true);$('html, body').scrollTop(curTreshold);}
else{reset();}});}
return _self;}
init();function reset()
{hide_pagination();opts.scrollContainer.scroll(scroll_handler);call_tooltip();}
function scroll_handler()
{var curScrOffset,scrTreshold;curScrOffset=util.getCurrentScrollOffset(opts.scrollContainer);scrTreshold=get_scroll_treshold();if(curScrOffset>=scrTreshold){if(get_current_page()>=opts.triggerPageTreshold){stop_scroll();show_trigger(function(){paginate(curScrOffset);});}
else{paginate(curScrOffset);}}}
function stop_scroll()
{opts.scrollContainer.unbind('scroll',scroll_handler);}
function hide_pagination()
{$(opts.pagination).hide();}
function get_scroll_treshold(pure)
{var el,treshold;el=$(opts.container).find(opts.item).last();if(el.size()===0){return 0;}
treshold=el.offset().top+ el.height();if(!pure){treshold+=opts.tresholdMargin;}
return treshold;}
function paginate(curScrOffset,onCompleteHandler)
{var urlNextPage;urlNextPage=$(opts.next).attr('href');if(!urlNextPage){if(opts.noneleft){$(opts.container).find(opts.item).last().after(opts.noneleft);}
return stop_scroll();}
if(opts.beforePageChange&&$.isFunction(opts.beforePageChange)){if(opts.beforePageChange(curScrOffset,urlNextPage)===false){return;}}
paging.pushPages(curScrOffset,urlNextPage);stop_scroll();show_loader();loadItems(urlNextPage,function(data,items){var result=opts.onLoadItems.call(this,items),curLastItem;if(result!==false){$(items).hide();curLastItem=$(opts.container).find(opts.item).last();curLastItem.after(items);$(items).fadeIn();}
urlNextPage=$(opts.next,data).attr('href');$(opts.pagination).replaceWith($(opts.pagination,data));remove_loader();hide_pagination();if(urlNextPage){reset();}
else{stop_scroll();}
opts.onRenderComplete.call(this,items);if(onCompleteHandler){onCompleteHandler.call(this);}});}
function loadItems(url,onCompleteHandler,delay)
{var items=[],container,startTime=Date.now(),diffTime,self;delay=delay||opts.loaderDelay;$.get(url,null,function(data){container=$(opts.container,data).eq(0);if(0===container.length){container=$(data).filter(opts.container).eq(0);}
if(container){container.find(opts.item).each(function(){items.push(this);});}
if(onCompleteHandler){self=this;diffTime=Date.now()- startTime;if(diffTime<delay){setTimeout(function(){onCompleteHandler.call(self,data,items);},delay- diffTime);}else{onCompleteHandler.call(self,data,items);}}},'html');}
function paginateToPage(pageNum)
{var curTreshold=get_scroll_treshold(true);if(curTreshold>0){paginate(curTreshold,function(){stop_scroll();if((paging.getCurPageNum(curTreshold)+ 1)<pageNum){paginateToPage(pageNum);$('html,body').animate({'scrollTop':curTreshold},400,'swing');}
else{$('html,body').animate({'scrollTop':curTreshold},1000,'swing');reset();}});}}
function get_current_page()
{var curScrOffset=util.getCurrentScrollOffset(opts.scrollContainer);return paging.getCurPageNum(curScrOffset);}
function get_loader()
{var loader=$('.ias_loader');if(loader.size()===0){loader=$('<div class="ias_loader">'+ opts.loader+'</div>');loader.hide();}
return loader;}
function show_loader()
{var loader=get_loader(),el;if(opts.customLoaderProc!==false){opts.customLoaderProc(loader);}else{el=$(opts.container).find(opts.item).last();el.after(loader);loader.fadeIn();}}
function remove_loader()
{var loader=get_loader();loader.remove();}
function get_trigger(callback)
{var trigger=$('.ias_trigger');if(trigger.size()===0){trigger=$('<div class="ias_trigger"><a href="all.html">'+ opts.trigger+'</a></div>');trigger.hide();}
return trigger;}
function show_trigger(callback)
{var trigger=get_trigger(callback),el;el=$(opts.container).find(opts.item).last();el.after(trigger);trigger.fadeIn();}
function remove_trigger()
{var trigger=get_trigger();trigger.remove();}};$.ias.defaults={container:'#container',scrollContainer:$(window),item:'.item',pagination:'#pagination',next:'.next',noneleft:false,loader:'<img src="images/loader.gif"/>',loaderDelay:600,triggerPageTreshold:4,trigger:'Load more items',tresholdMargin:0,history:true,onPageChange:function(){},beforePageChange:function(){},onLoadItems:function(){},onRenderComplete:function(){},customLoaderProc:false};$.ias.util=function()
{var wndIsLoaded=false;var forceScrollTopIsCompleted=false;var self=this;function init()
{$(window).load(function(){wndIsLoaded=true;});}
init();this.forceScrollTop=function(onCompleteHandler)
{$('html,body').scrollTop(0);if(!forceScrollTopIsCompleted){if(!wndIsLoaded){setTimeout(function(){self.forceScrollTop(onCompleteHandler);},1);}else{onCompleteHandler.call();forceScrollTopIsCompleted=true;}}};this.getCurrentScrollOffset=function(container)
{var scrTop,wndHeight;if(container.get(0)===window){scrTop=container.scrollTop();}else{scrTop=container.offset().top;}
wndHeight=container.height();return scrTop+ wndHeight;};};$.ias.paging=function()
{var pagebreaks=[[0,document.location.toString()]];var changePageHandler=function(){};var lastPageNum=1;var util=new $.ias.util();function init()
{$(window).scroll(scroll_handler);}
init();function scroll_handler()
{var curScrOffset,curPageNum,curPagebreak,scrOffset,urlPage;curScrOffset=util.getCurrentScrollOffset($(window));curPageNum=getCurPageNum(curScrOffset);curPagebreak=getCurPagebreak(curScrOffset);if(lastPageNum!==curPageNum){scrOffset=curPagebreak[0];urlPage=curPagebreak[1];changePageHandler.call({},curPageNum,scrOffset,urlPage);}
lastPageNum=curPageNum;}
function getCurPageNum(scrollOffset)
{for(var i=(pagebreaks.length- 1);i>0;i--){if(scrollOffset>pagebreaks[i][0]){return i+ 1;}}
return 1;}
this.getCurPageNum=function(scrollOffset)
{scrollOffset=scrollOffset||util.getCurrentScrollOffset($(window));return getCurPageNum(scrollOffset);};function getCurPagebreak(scrollOffset)
{for(var i=(pagebreaks.length- 1);i>=0;i--){if(scrollOffset>pagebreaks[i][0]){return pagebreaks[i];}}
return null;}
this.onChangePage=function(fn)
{changePageHandler=fn;};this.pushPages=function(scrollOffset,urlNextPage)
{pagebreaks.push([scrollOffset,urlNextPage]);};};$.ias.history=function()
{var isPushed=false;var isHtml5=false;function init()
{isHtml5=!!(window.history&&history.pushState&&history.replaceState);isHtml5=false;}
init();this.setPage=function(pageNum,pageUrl)
{this.updateState({page:pageNum},'',pageUrl);};this.havePage=function()
{return(this.getState()!==false);};this.getPage=function()
{var stateObj;if(this.havePage()){stateObj=this.getState();return stateObj.page;}
return 1;};this.getState=function()
{var haveState,stateObj,pageNum;if(isHtml5){stateObj=history.state;if(stateObj&&stateObj.ias){return stateObj.ias;}}
else{}
return false;};this.updateState=function(stateObj,title,url)
{if(isPushed){this.replaceState(stateObj,title,url);}
else{this.pushState(stateObj,title,url);}};this.pushState=function(stateObj,title,url)
{var hash;if(isHtml5){history.pushState({ias:stateObj},title,url);}
else{}
isPushed=true;};this.replaceState=function(stateObj,title,url)
{if(isHtml5){history.replaceState({ias:stateObj},title,url);}
else{this.pushState(stateObj,title,url);}};};})(jQuery);

I have been working on this for two days, but could not fix it, because I know nothing in coding. I could only experiment, remove some code etc, but I think that the solution is beyond that.

Any help will be appreciated.

Answer

Lasha Lejava picture Lasha Lejava · Aug 5, 2014

danemacmillan, you were right. I have added the following code and now tooltipster works on dynamically generated content too.

<script type="text/javascript">
    $('body').on('mouseover mouseenter', '.tooltip', function(){
         $(this).tooltipster({
            contentAsHTML: 'true',
            animation: 'grow',
            theme: '.my-custom-theme',
            position: 'top-left'
         });
         $(this).tooltipster('show');
    });
</script>

I still don't believe in it, but it really works in fact! :D

Related questions

Bootstrap Tooltip - Hide when another tooltip is click

I hope someone can help. I'm trying to hide the tooltip when another tooltip icon is clicked. It works but when I decide to click the last tooltip again it 'flashes' the tooltip. var Hastooltip = $('.hastooltip'); HasTooltip.on('click', …

Read More
customize highcharts tooltip to show datetime

I'm developing a project that is expected to show this graph: http://jsfiddle.net/Kc23N/ When I click a point (tooltip) I want to show a date understandable, not the value in milliseconds. I think needs to change this …

Read More
Turn the Tooltip Bootstrap functionality off

According the documentation is is possible to turn off the functionality just doing $('body').off('.alert.data-api'). In the case of tooltip I tried the following from js console $('body').off('.tooltip.data-api') but it does not disable …

Read More