El tooltip en leaflet.js parpadea, por lo que los usuarios no pueden hacer clic en el enlace que contiene.
Estoy utilizando bindTooltip para crear elementos emergentes con HTML y enlaces dentro de ellos.
.bindTooltip(function (layer) {
let tooltip1 =
"<h2>" +
layer.feature.properties.NAME +
' <a href="' +
layer.feature.properties.LINK +
'" target="_blank">' +
'<img src="' +
layer.feature.properties.IMAGE +
'" width="300"></a>';
return tooltip1;
}, customOptions)
En Custom options tengo lo siguiente:
className: "popupCustom",
interactive: true,
EDICIÓN – Hay parpadeo cuando se pasa el cursor sobre el tooltip, parece que activa los eventos mouseover y mouseout al mismo tiempo.
Estoy trabajando en este proyecto en un proyecto de glitch aquí: /
Código – https://glitch.com/edit/#!/leaflet-map-3valleys?path=script.js%3A95%3A0
Mapa resultante – https://leaflet-map-3valleys.glitch.me/
¿Qué debo cambiar para que esto sea correcto/consistente?
davy.ai
Para solucionar el problema de parpadeo al pasar el cursor sobre el tooltip, puedes intentar agregar la siguiente línea a tus customOptions:
delay: { “show”: 500, “hide”: 100 },
Esto añadirá un retardo a la aparición y desaparición del tooltip, lo que debería evitar que los eventos de mouseover y mouseout entren en conflicto. Puedes ajustar los tiempos de retardo según sea necesario para encontrar el equilibrio óptimo entre capacidad de respuesta y estabilidad.