Tooltipster doens't work in table cells

Hi I’be been trying to add tooltip inside of td but it seems doesn’t work. I have table with angular like this:

<script>
		    $(document).ready(function() {
		    	$('.tooltipAviso').tooltipster({
		    		contentCloning: true,
		    		contentAsHTML : true,
		    		side : "left"
		    	});
	        });
<tr ng-repeat="aviso in paginacao.registros">
							<td>{{aviso.numeroAvisoPagamento}}</td>
							<td>{{aviso.qtdeNotasCobrancaLancamento}}</td>
							<td>{{aviso.qtdeNotasAviso}}</td>
							<td>{{aviso.dataAvisoPagamento | date:'dd/MM/yyyy'}}</td>
							<td>{{aviso.dataConciliacaoAviso | date:'dd/MM/yyyy HH:mm:ss'}}</td>
							<td><span class="label label-{{aviso.statusAvisoPagamento}}">{{aviso.statusAvisoPagamento | format : 'statusConciliacaoAuto'}}</span></td>
							<td>{{aviso.tipoLoteAvisoPagamento}}</td>
							<td>{{aviso.resumoAvisoPagamento.valorTotalBruto | currency:"R$ ":0}}</td>
							<td class="text-right">
									<!-- <span ng-show="{{permiteApagarAviso.indexOf(aviso.statusAvisoPagamento) > -1}}" class="tooltipAviso fa fa-thumbs-down fa-3" 
									    style="cursor:pointer" ng-click="removerAviso(aviso)" data-tooltip-content="#tooltip_content">
									</span> -->
									<div class="tooltipAviso" data-tooltip-content="#tooltip_content">Cell content</div>
								<!-- <i ng-show="{{permiteTotalizador.indexOf(aviso.statusAvisoPagamento) > -1}}" style="cursor:pointer" 
								   class="fa fa-bar-chart fa-3" aria-hidden="false" ui-sref="adm_aviso_pagamento_totalizador({numAviso:aviso.numeroAvisoPagamento})">
								</i> -->
								<i class="fa fa-bars fa-3" style="cursor: pointer;" ui-sref="adm_aviso_pagamento_log({id:aviso.id,aviso:aviso})"></i>
							</td>
						</tr>

The tooltip doesn’t work, but if I setup in another element outside of table , it works.

[ramilani12]

Hi louisameline

Thanks for your help. As you said I fixed with delegation. My solution is:

<script>
		     $(document).ready(function() {
		    	 var tooltipInstance;
		    	 $("body").on('mouseover', 'span:not(.tooltipstered)', function(){
		    	     tooltipInstance = $(this).tooltipster({
		    	    	 contentCloning: true,
				    	 contentAsHTML : true,
				    	 side : "top"
		    	     });
		    	     tooltipInstance.tooltipster('open');
		    	 });
		    }); 
	    </script>

Table

<tbody>
						<tr ng-repeat="aviso in paginacao.registros">
							<td>{{aviso.numeroAvisoPagamento}}</td>
							<td>{{aviso.qtdeNotasCobrancaLancamento}}</td>
							<td>{{aviso.qtdeNotasAviso}}</td>
							<td>{{aviso.dataAvisoPagamento | date:'dd/MM/yyyy'}}</td>
							<td>{{aviso.dataConciliacaoAviso | date:'dd/MM/yyyy HH:mm:ss'}}</td>
							<td><span class="label label-{{aviso.statusAvisoPagamento}}">{{aviso.statusAvisoPagamento | format : 'statusConciliacaoAuto'}}</span></td>
							<td>{{aviso.tipoLoteAvisoPagamento}}</td>
							<td>{{aviso.resumoAvisoPagamento.valorTotalBruto | currency:"R$ ":0}}</td>
							<td class="text-right">
								<span ng-show="{{permiteApagarAviso.indexOf(aviso.statusAvisoPagamento) > -1}}" class="tooltipAviso fa fa-thumbs-down fa-3" 
								    style="cursor:pointer" ng-click="removerAviso(aviso)" 
								    data-tooltip-content="#tooltip-content">
								</span>
								<!-- <i ng-show="{{permiteTotalizador.indexOf(aviso.statusAvisoPagamento) > -1}}" style="cursor:pointer" 
								   class="fa fa-bar-chart fa-3" aria-hidden="false" ui-sref="adm_aviso_pagamento_totalizador({numAviso:aviso.numeroAvisoPagamento})">
								</i> -->
								<span  data-tooltip-content="#tooltip-content1" class="tooltipAviso fa fa-bars fa-3" 
								       style="cursor: pointer;" ui-sref="adm_aviso_pagamento_log({id:aviso.id,aviso:aviso})">
								</span>
							</td>
						</tr>
					</tbody>

The content of tooltip:

<div class="tooltip_templates">
  				<span id="tooltip-content">
      				<strong>This is the content of my tooltip!</strong>
  				</span>
  				<span id="tooltip-content1">
      				<strong>This is the content of my tooltip1!</strong>
  				</span>
  			</div>

[louisameline]

Ok. You should not call your variable tooltipInstance though because it’s not a Tooltipster instance, it’s just the jQuery-wrapped HTML element.