¿Cómo usar HTML complejo con la información sobre herramientas de Bootstrap de Twitter usando jQuery?

Posted on by Rudeus Greyrat

La información sobre herramientas de Bootstrap nos da una pista sobre el elemento específico de una manera gráfica. La información sobre herramientas se utiliza por razones de rendimiento, por lo que se puede personalizar según el dominio de requisitos. La información sobre herramientas se implementa mediante javascript, se basa en una biblioteca de terceros conocida como popper.js para fines de posicionamiento.

Funciona con el concepto de pasar el mouse sobre el puntero del cursor cuando el puntero se desplaza sobre el elemento, una sugerencia puede surgir en cualquiera de las 4 direcciones (izquierda, derecha, arriba y abajo) como se indica en el código.

Algunos ejemplos generales:

  • En una página de inicio de sesión, la información sobre herramientas de contraseña muestra el requisito, por ejemplo, debe tener 8 caracteres, comenzar con una letra mayúscula, etc.
  • Para el nombre , puede que solo se escriba el nombre y no el segundo nombre o el apellido.

El fragmento de JavaScript

// Write Javascript code here
$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

Nota: se utiliza HTML, CSS, Bootstrap, JavaScript y jQuery.

  • Método 1:

    • La siguiente implementación se realiza para 4 botones a la izquierda, derecha, arriba y abajo y sus respectivos consejos de herramientas que indican la posición de los botones respectivamente cuando el cursor pasa sobre los botones.

    <!DOCTYPE html>
    <html>
      
    <head>
        <meta name="viewport" content=
            "width=device-width,initial-scale=1.0" />
          
        <title>
            HTML with twitter Bootstrap 
            tooltip using jQuery
        </title>
      
        <link rel="stylesheet" href=
    "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
            integrity=
    "sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7"
            crossorigin="anonymous">
              
        <script src=
    "https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
        </script>
          
        <script src=
    "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
                integrity=
    "sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS"
                crossorigin="anonymous">
        </script>
      
        <script type="text/javascript">
            $(document).ready(function() {
                $("#toptip").tooltip({
                    placement: "top"
                });
      
                $("#bottomtip").tooltip({
                    placement: "bottom"
                });
      
                $("#lefttip").tooltip({
                    placement: "left"
                });
      
                $("#righttip").tooltip({
                    placement: "right"
                });
            });
        </script>
    </head>
      
    <body>
        <center>
              
        <div class="container">
            <h1><u>Bootstrap Tooltip Demo</u></h1>
          
        <br/><br/>
          
        <div>
            <button type="button" id="toptip"
                    class="btn btn-danger"
                    title="A Tooltip with Top placement">
                Top Tooltip demo
            </button>
            <br><br>
              
            <button type="button" id="bottomtip"
                    class="btn btn-info"
                    title="A Tooltip with Bottom placement">
                Bottom Tooltip demo
            </button>
            <br><br>
              
            <button type="button" id="lefttip"
                    class="btn btn-success"
                    title="A Tooltip with Left placement">
                Left Tooltip demo
            </button>
            <br><br>
              
            <button type="button" id="righttip"
                    class="btn btn-warning"
                    title="A Tooltip with Right placement">
                Right Tooltip demo
            </button>
        </div>
    </body>
      
    </html>

    Producción:

  • Método 2: La siguiente implementación es una página de registro con información sobre herramientas para dar consejos/recomendaciones. La etiqueta de formulario en el HTML se usa para crear un formulario y los atributos de información sobre herramientas se agregan en consecuencia.

    <!DOCTYPE html>
    <html>
      
    <head>
        <title>Bootstrap Grid</title>
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" 
              href=
    "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
      
        <!-- Optional theme -->
        <link rel="stylesheet" 
              href=
    "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
        <script src=
    "https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
        </script>
      
        <!-- Latest compiled and minified JavaScript -->
        <script src=
    "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js">
        </script>
      
        <script type="text/javascript">
            $(document).ready(function() {
                $('#name').tooltip({
                    'trigger': 'focus',
                    'title': 'Name is Required'
                });
      
                $('#email').tooltip({
                    'trigger': 'focus',
                    'title': 'Email is Required'
                });
      
                $('#password').tooltip({
                    'trigger': 'focus',
                    'title': "Password is Required"
                });
            });
        </script>
        <style>
            .serif {
                font-family: "Times New Roman", Times, serif;
            }
              
            p {
                padding: 20px;
            }
        </style>
    </head>
      
    <body>
        <h1><p class="serif">Sign Up Sample Page</p></h1>
      
        <div class="container" style="padding:50px;">
      
            <form role="form">
                <div class="form-group">
                    <label for="firstname">Name</label>
                    <input type="text" 
                           name="Name"
                           class="form-control" 
                           id="name" 
                           placeholder="Enter Name">
                </div>
                <div class="form-group">
                    <label for="email">Email</label>
                    <input type="text"
                           name="email" 
                           class="form-control" 
                           id="email" 
                           placeholder="Enter email">
                </div>
      
                <div class="form-group">
                    <label for="Password">Password</label>
                    <input type="password" 
                           name="password"
                           class="form-control" 
                           id="password" 
                           placeholder="Enter Password">
                </div>
            </form>
        </div>
    </body>
      
    </html>

    Producción:

Publicación traducida automáticamente

Artículo escrito por mohitgouti 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 *