Bootstrap 4: información sobre herramientas

Descripción

La información sobre herramientas es útil cuando necesita describir un enlace. La información sobre herramientas mostrará un pequeño cuadro emergente cuando pase el mouse sobre un elemento.

Crear una descripción emergente

Puede agregar información sobre herramientas a un elemento agregando el atributo data-toggle = "información sobre herramientas" . El atributo de título indica el texto de una información sobre herramientas.

El siguiente ejemplo muestra el uso de scrollspy:

Ejemplo

<html lang = "en">
   <head>
      <!-- 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.1.3/css/bootstrap.min.css"
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "container">
         <h2>Tooltip on Link</h2>
         <p>
            Hello World!!! Welcome to 
            <a href = "#" data-toggle = "tooltip" title = "Tooltip on link">
               Tutorialspoint...
            </a>
         
            <h2>Tooltip on Button</h2>
            Hello World!!! Welcome to 
            <button type = "button" class = "btn btn-info" data-toggle = "tooltip" 
               data-placement = "top" title = "Tooltip on button">
               Tutorialspoint...
            </button>
         </p>
      </div>
      
      <script>
         $(document).ready(function(){
            $('[data-toggle = "tooltip"]').tooltip();
         });
      </script>
      
      <!-- jQuery library -->
      <script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js" 
         integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
         crossorigin = "anonymous">
      </script>
      
      <!-- Popper -->
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" 
         integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" 
         crossorigin = "anonymous">
      </script>
      
      <!-- Latest compiled and minified Bootstrap JavaScript -->
      <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" 
         integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

Producirá el siguiente resultado:

Salida

Información sobre herramientas de posicionamiento

La información sobre herramientas se puede mostrar en cuatro direcciones, como en la parte superior, inferior, izquierda o derecha mediante el uso del atributo de ubicación de datos en el elemento.

El siguiente ejemplo muestra el posicionamiento de la información sobre herramientas:

Ejemplo

<html lang = "en">
   <head>
      <!-- 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.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "container">
      <br>
      
      <h2>Positioning Tooltips</h2>
      <br>
      <button type = "button" class = "btn btn-info" data-toggle = "tooltip" 
         data-placement = "top" title = "Tooltip on top">Tooltip on top</button>
      
      <button type = "button" class = "btn btn-info" data-toggle = "tooltip" 
         data-placement = "right" title = "Tooltip on right">Tooltip on right</button>
      
      <button type = "button" class = "btn btn-info" data-toggle = "tooltip" 
         data-placement = "bottom" title = "Tooltip on bottom">Tooltip on bottom</button>
      
      <button type = "button" class = "btn btn-info" data-toggle = "tooltip" 
         data-placement = "left" title = "Tooltip on left">Tooltip on left</button>
      
      <script>
         $(document).ready(function(){
            $('[data-toggle = "tooltip"]').tooltip();   
         });
      </script>
      
      <!-- jQuery library -->
      <script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js" 
         integrity =" sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
         crossorigin = "anonymous">
      </script>
      
      <!-- Popper -->
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" 
         integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" 
         crossorigin = "anonymous">
      </script>
      
      <!-- Latest compiled and minified Bootstrap JavaScript -->
      <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" 
         integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

Producirá el siguiente resultado:

Salida

↰ Previous page