es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

WordPress – ¿Cómo agregar HTML en una herramienta de información con Bootstrap 4.5?

28 May, 2023 Programación

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?

Tags:  , ,

Answer

  1. Avatar for davy.ai
    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 atributo data-original-title en lugar del atributo title para el contenido del tooltip. Luego, podemos usar jQuery para definir dinámicamente el atributo title con el valor del atributo data-original-title. Aquí está cómo se vería el código HTML actualizado:

    <li><a href="/jeux/tr1/solution/item1/" data-toggle="tooltip" data-original-title="<img src='/img/jeux/tr1/solution/001.png' alt=''>">Elemento 1</a></li>
<li><a href="/jeux/tr1/solution/item2/">Elemento 2</a></li>
<li><a href="/jeux/tr1/solution/item3/">Elemento 3</a></li>

    Y aquí está el script JS actualizado:

    <script>
    $(function () {
        $('[data-toggle="tooltip"]').tooltip({
            html: true
        });

        // define el atributo title para cada enlace con el valor de data-original-title
        $('[data-toggle="tooltip"]').each(function() {
            $(this).attr('title', $(this).data('original-title'));
        });
    });
</script>

    Con estos cambios, el tooltip debería mostrar la imagen de HTML correctamente sin romper el resto de la página.

Comments are closed.