0

Estoy pasando en estos momentos un curso de Bootstrap, en el trabajo con "tooltip" se me ha presentado un problema y es que por algún motivo el atributo data-placement='top' no me funciona. En el código de ejemplo debería mostrarme "Texto del tooltip" justo arriba del "Texto de ejemplo"

Este es un código de ejemplo:

<h5 class="card-title" data-toggle="tooltip" data-placement="top" title="Texto del tooltip"> Texto de ejemplo</h5>

    <script>
       $(function () {
          $('[data-toggle="tooltip"]').tooltip()
       })
    </script>

De esta forma es que se ve en mi PC introducir la descripción de la imagen aquí

Los archivos de bootstrap los cargo de manera local

<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/popper.js/dist/popper.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
2
  • Por alguna razon no funciona con la etiqueta h5 Commented el 20 may. 2019 a las 17:33
  • ¿Es posible que tengas algún typo en tu código? El código que muestras funciona correctamente. Commented el 21 may. 2019 a las 15:41

2 respuestas 2

1

antes que nada no se si sea un error de programación o simplemente un error de dedo al copiar tu código, pero le hace falta un ";" al finalizar la linea javascript.

$('[data-toggle="tooltip"]').tooltip();

Por otro lado, probé tu código y funciona correctamente.

En el ejemplo que pongo abajo muestro dos textos, uno al inicio de la pagina y otro mas abajo, ambos muestran el tooltip, solo que el tooltip del primer texto siempre se va a mostrar abajo ya que no hay espacio para que este se muestre por encima del texto, no se si ese sea tu problema.

<!doctype html>
<html lang="es">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h5 class="card-title" data-toggle="tooltip" data-placement="top" title="Texto del tooltip"> Texto de ejemplo</h5>
    <br/>
    <br/>
    <h5 class="card-title" data-toggle="tooltip" data-placement="top" title="Texto del tooltip" style="width: 300px;"> Texto de ejemplo</h5>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

<script>
      $( document ).ready(function() {
          $('[data-toggle="tooltip"]').tooltip();
      });
    </script>

6
  • 1
    La ; esta de mas.. es javascript... y el error que veo es que el tooltip se muestra al centro y el texto esta a la izquierda Commented el 20 may. 2019 a las 19:23
  • Recuerda que para este ejemplo no esta definido un ancho en la etiqueta h5, y dado que por defecto abarca el total del ancho de la pagina, o su contenedor, el tooltip se muestra siempre al centro, ve de nuevo el segundo texto ahora que le he asignado una anchura de 300px
    – Arreguin92
    Commented el 20 may. 2019 a las 19:53
  • Me sigue sucediendo exactamente lo mismo que antes
    – Jorge
    Commented el 21 may. 2019 a las 0:37
  • @Jorge en que parte de tu código tienes el script que inicializa tus tooltips? Antes o después de importar las librerías Javascript?
    – Arreguin92
    Commented el 21 may. 2019 a las 14:36
  • @Arreguin92 Lo tengo inicializado después de importar las librerías javascript
    – Jorge
    Commented el 21 may. 2019 a las 15:30
0

Después de tanto buscar, la respuesta es la siguiente:

<script src="node_modules/popper.js/dist/umd/popper.min.js"></script>

Había un error en la ruta hacia popper.min.js, se había omitido "/umd"

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.