0

Al intentar poner un texto cuando paso por encima de un tooltip , me saca el mensaje pero no lo pone en su sitio que yo le indico.
Creo haber seguido las instrucciones de la documentación pero no funciona.
Decir que son mis primeros pasos con Bootstrap.

Dejo el codigo:

<!-- TOOLTIPS -->
       <button type="button" class="btn-tool btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
                    Tooltip on top
       </button>
                <button type="button" class="btn-tool btn btn-info mt-3" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">
                    Tooltip on right
                </button>
                <button type="button" class="btn-tool btn btn-warning mt-3" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">
                    Tooltip on bottom
                </button>

Estos son los scripts:

<script type="text/javascript" src="jquery/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="jquery/popper.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.bundle.js"></script>
<script>
    $(document).ready(function(){
        $(".carousel").carousel({
            interval: 3000
        });
        $('.btn-tool').tooltip({
            
        })
    });
</script>

Estos SCRIPTS que cargo los tengo en mi proyecto descargados de la web de Bootstrap.
El resto de funciones van perfectas.

Utilizo Bootstrap 3.5.1.
Muchas gracias...

2
  • 1
    El problema es que en tu código javascript intentas ponerle el tooltip a los objetos de clase .btn-tool y ninguno de esos button tienen la clase .btn-tool Tal cual tienes tu código, la opción más rápida sería cambiar $('.btn-tool') por $('[data-bs-toggle="tooltip"]'), o añadir la clase .btn-tool a todo lo que quieras que tenga tooltip...
    – Benito-B
    Commented el 30 ene. 2021 a las 15:04
  • Ya lo he corregido, había estado probando cosas y a la hora de ponerlo no me he dado cuenta. , pero aun asi no funciona . Muchas gracias por tu ayuda.
    – Lekanda
    Commented el 30 ene. 2021 a las 15:22

1 respuesta 1

0

Despues de un rato probando diferentes conbinaciones, es decir, a chorra me ha salido esto y funciona.
He cambiado a la version antigua sin bs de los comandos.
He añadido unos popover para probar.

<!-- TOOLTIPS -->
<button type="button" class="btn-tool btn btn-secondary mt-3" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
        Tooltip top
</button>
<button type="button" class="btn-tool btn btn-info mt-3" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
        Tooltip right
</button>
<button type="button" class="btn-tool btn btn-info mt-3" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
       Tooltip bot
</button>
<button type="button" class="btn-pop btn btn-warning mt-3" data-container="body" data-toggle="popover" data-placement="right" data-content="Tooltip on bottom">
       Tooltip bott
 </button>
 <button type="button" class="btn-pop btn btn-warning mt-3" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Tooltip on bottom">
       Tooltip bott
 </button>

En los scripts que se cargan:

<script type="text/javascript" src="jquery/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="jquery/popper.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.bundle.js"></script>
<script>
        $(document).ready(function(){
            $(".carousel").carousel({
                interval: 3000
            });
            $('.btn-tool').tooltip();
            $('.btn-pop').popover();
        });
</script>    

De esta forma funciona. Espero que le sirva a alguien. Un saludo.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.