WordPress – ¿Cómo agregar HTML en una herramienta de información con Bootstrap 4.5?
Después de buscar en muchos temas en la web, he venido a preguntar directamente porque no he encontrado respuesta a mi pregunta.
En WordPress, intento incrustar una imagen HTML en un tooltip en un enlace, pero todo el código HTML de mi página se rompe.
En mi encabezado, tengo el siguiente script de JS para activar los tooltips:
<script>
$(function () {
$('[data-toggle="tooltip"]').tooltip({
html: true
})
})
</script>
En mi página de WordPress, tengo el siguiente código HTML:
<li><a href="/jeux/tr1/solution/item1/" data-toggle="tooltip" title="<img src='/img/jeux/tr1/solution/001.png' alt=''>">Item 1</a></li>
<li><a href="/jeux/tr1/solution/item2/">Item 2</a></li>
<li><a href="/jeux/tr1/solution/item3/">Item 3</a></li>
Y esto es lo que tengo:
La última parte del código del primer li
no se interpreta y el navegador (Firefox en este caso) muestra directamente el Item 2 con el Item 1 incorrecto en el tooltip.
Pueden echar un vistazo directamente aquí: https://www.tombraidercie.com/public-playground/
¿Tienes alguna idea?
davy.ai
El problema con el código es que el código de imagen de HTML en el atributo
title
del enlace está haciendo que el código de HTML se rompa. Para solucionar este problema, podemos usar el atributodata-original-title
en lugar del atributotitle
para el contenido del tooltip. Luego, podemos usar jQuery para definir dinámicamente el atributotitle
con el valor del atributodata-original-title
. Aquí está cómo se vería el código HTML actualizado:Y aquí está el script JS actualizado:
Con estos cambios, el tooltip debería mostrar la imagen de HTML correctamente sin romper el resto de la página.