¿Cómo cambiar el ancho y el alto de la información sobre herramientas de Twitter Bootstrap?

Información sobre herramientas de Bootstrap: se utiliza una información sobre herramientas para proporcionar sugerencias textuales interactivas al usuario sobre el elemento cuando se mueve el puntero del mouse. Recopilación de elementos de arranque estandarizados como una pequeña ventana emergente que aparece cada vez que el usuario realiza una acción específica, haga clic, pase el mouse (predeterminado) y se enfoque en ese elemento. También admite activación manual para eventos específicos.

En este artículo, primero diseñaremos la información sobre herramientas y luego manipularemos la altura y el ancho de esa información sobre herramientas.
Crear información sobre herramientas: el atributo data-toggle=”tooltip” se utiliza para crear una información sobre herramientas. El atributo de título se utiliza para especificar el texto que debe mostrarse dentro de la información sobre herramientas.

Cambiar el ancho/alto de la información sobre herramientas: aquí, modificaremos la clase .tooltip-inner para satisfacer esa demanda anulando algunas de las propiedades CSS predeterminadas. A continuación se muestra la implementación de la misma.

  • Programa:

    <!DOCTYPE html> 
    <html lang="en"
    <head
        <title>Tooltip</title
          
        <meta charset="utf-8"
        <meta name="viewport" content="width=device-width, initial-scale=1"
      
        <link rel="stylesheet" href
          
        <script src
        </script
          
        <script src
        </script
          
        <script src
        </script
        <style>
            body {
                text-align:center;
            }
              
            h1 {
                color: green;
            }
            .tooltip-inner
                        {
                            width:200px;
                            height:100px; 
                            padding:4px;
                        }
        </style>
    </head
      
    <body
          
        <div class="container"
              
            <h1 data-toggle="tooltip" 
                title="A Computer Science Portal for Geeks"
                GeeksforGeeks 
            </h1
        </div
          
        <script
            $(document).ready(function() { 
                $('[data-toggle="tooltip"]').tooltip(); 
            }); 
        </script
    </body
      
    </html>                        
  • Producción:

Publicación traducida automáticamente

Artículo escrito por devproductify y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *