Skip Navigation

[Resuelto] Bootstrap tooltips do not work after first slider transition

Este hilo está resuelto. Aquí tiene una descripción del problema y la solución.

Problem: I have used Bootstrap Tooltips in a slider View. After the first page, the Tooltips don't work.

Solution: Use the Front-end Events button to create event handlers for pagination events. Inside those event handlers, trigger your tooltip initialization code again.

This support ticket is created hace 5 años, 7 meses. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Hoy no hay técnicos de soporte disponibles en el foro Juego de herramientas. Siéntase libre de enviar sus tiques y les daremos trámite tan pronto como estemos disponibles en línea. Gracias por su comprensión.

Sun Mon Tue Wed Thu Fri Sat
8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 - -
13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 - -

Supporter timezone: America/New_York (GMT-04:00)

Este tema contiene 2 respuestas, tiene 2 mensajes.

Última actualización por Darryl hace 5 años, 7 meses.

Asistido por: Christian Cox.

Autor
Mensajes
#1228777

I created a slider for small images and would like to have a bootstrap tooltip displayed when someone hovers over each image.

After the first transition, the tooltips no longer work.

I have a test page set up at enlace oculto

In the Loop Editor under JS editor I have the JS

jQuery(document).ready(function( $ ){
     $('[data-toggle="tooltip"]').tooltip()
});

I have also tried adding this to the content template instead but had the same results.

The content of the Loop Editor is

[wpv-layout-start]
	[wpv-items-found]
	<!-- wpv-loop-start -->
	<wpv-loop wrap="4" pad="true">
		[wpv-item index=1]
		<div class="row ">
			<div class="col-sm-3">[wpv-post-body view_template="affiliation-slider-slide"]</div>
		[wpv-item index=other]
			<div class="col-sm-3">[wpv-post-body view_template="affiliation-slider-slide"]</div>
		[wpv-item index=4]
			<div class="col-sm-3">[wpv-post-body view_template="affiliation-slider-slide"]</div>
		</div>
		[wpv-item index=pad]
			<div class="col-sm-3"></div>
		[wpv-item index=pad-last]
			<div class="col-sm-3"></div>
		</div>
	</wpv-loop>
	<!-- wpv-loop-end -->
	[/wpv-items-found]
	[wpv-no-items-found]
		<strong>[wpml-string context="wpv-views"]No items found[/wpml-string]</strong>
	[/wpv-no-items-found]
[wpv-layout-end]

I have also tried a loop without all the bootstrap grid code.

The content of my template is

<a href="#" data-toggle="tooltip" title="[wpv-post-title]"><img class="slider-image" src="[wpv-post-featured-image size="custom" height="75" output="url"]"/></a>
#1228818

Use the front-end events button to generate event handlers that will allow you to trigger your tooltip initialization code after pagination events. Edit this View and make sure the Search and Pagination editor is visible. If not, scroll to the top right corner and click "Screen Options", then enable Search and Pagination. Twirl open the JS editor panel and you will find the button "Front-end Events", which will help you create event handler code that is triggered after pagination. Then inside that event handler, initialize the tooltips again.

#1228883

My issue is resolved now. Thank you!