Información sobre herramientas de Bootstrap

En este artículo, estaríamos discutiendo el complemento de información sobre herramientas proporcionado por bootstrap. La información sobre herramientas es bastante útil para mostrar la descripción de diferentes elementos en la página web. La información sobre herramientas se puede invocar en cualquier elemento de una página web. La información sobre herramientas en bootstrap depende de la biblioteca de terceros Tether para el posicionamiento. Por lo tanto, debemos incluir tether.min.js antes de bootstrap.js . Ahora veamos un ejemplo de información sobre herramientas.  

Ahora examinaremos el código que genera la información sobre herramientas anterior 

<!-- Tooltip on a header -->
<h3 data-toggle="tooltip" title="Hey! Tooltip here!">
    Hover Over me to see a tooltip
</h3>

Para introducir información sobre herramientas, agregamos el atributo de cambio de datos a un elemento y necesitamos inicializar la información sobre herramientas con jQuery. código jQuery para inicializar una información sobre herramientas: 

<script>
    // jQuery code for initializing a tooltip
    $(document).ready(function () {
        // jQuery Attribute value selector to
        // select the specified element and
        // call the tooltip method on it
        $('[data-toggle="tooltip"]').tooltip();
    });
</script>

Incluso podemos personalizar esta información sobre herramientas de acuerdo con nuestros requisitos, exploremos diferentes formas en las que podemos personalizar la información sobre herramientas.

• Colocación de una información sobre herramientas : podemos colocar una información sobre herramientas en la parte superior, inferior, izquierda y derecha de un elemento. 

Ejemplo:

Código para el ejemplo anterior: 

<!-- Tooltips on simple buttons -->
<!-- Placement of tooltips -->
<div class="row" style="margin:30px">
    <div class="col-2">
        <button type="button" class="btn btn-info"
            data-toggle="tooltip" data-placement="top"
            title="Information Button">
            Information
        </button>
    </div>
    <div class="col-2">
        <button type="button" class="btn btn-success"
            data-toggle="tooltip" data-placement="right"
            title="Success Button">
            Success
        </button>
    </div>
    <div class="col-2">
        <button type="button" class="btn btn-danger"
            data-toggle="tooltip" data-placement="bottom"
            title="Danger button">
            Danger
        </button>
    </div>
    <div class="col-2">
        <button type="button" class="btn btn-warning"
            data-toggle="tooltip" data-placement="left"
            title="Warning button">
            Warning
        </button>
    </div>
</div>

• En el código anterior, hemos utilizado el atributo de ubicación de datos para establecer la ubicación de la información sobre herramientas, también hemos utilizado las clases de fila y columna proporcionadas por el sistema de cuadrícula de arranque.
• Html dentro de una información sobre herramientas : podemos agregar html como contenido de una información sobre herramientas. 

Ejemplo:

Código para el ejemplo anterior: 

<!-- Tooltip with html -->
<div class="row" style="margin:40px">
    <button type="button" class="btn btn-warning"
        data-toggle="tooltip" data-placement="left"
        data-html="true" title=
        "<h4>Hey!</h4>
<p>Tooltip with html</p>
">
        Warning
    </button>
</div>

• En el código anterior, hemos utilizado el atributo data-html para agregar un html dentro de una información sobre herramientas.
• Desplazamiento para una información sobre herramientas : podemos establecer el desplazamiento de la información sobre herramientas en relación con el objetivo. 

Ejemplo:

 Código para el ejemplo anterior: 

<div class="row" style="margin:40px">
    <button type="button" class="btn btn-warning"
        data-toggle="tooltip" data-placement="right"
        data-offset="20 0"
        title="Don't click on Warning Button">
        Warning
    </button>
</div>

• En el código anterior, hemos utilizado el atributo de compensación de datos para establecer el atributo

Nota: La salida de todo el código a continuación no es estática, por lo tanto, la salida no se muestra aquí.

• Animación en una información sobre herramientas: De forma predeterminada, la animación se agrega a la información sobre herramientas, es decir, se desvanece y se desvanece. Podemos eliminar esta animación. 

<!-- Removing animation from the tooltip -->
<div class="row" style="margin:40px">
    <button type="button" class="btn btn-warning"
        data-toggle="tooltip" data-placement="right"
        data-animation="false"
        title="Don't click on Warning Button">
        Warning
    </button>
</div>

• En el código anterior, hemos utilizado el atributo de animación de datos y se establece en falso para eliminar la animación de la información sobre herramientas.
• Retraso en la aparición y desaparición : Podríamos establecer un intervalo de tiempo para la aparición y desaparición de un tooltip. Podemos establecer un retraso de dos maneras:
  1. Establecemos el mismo tiempo de retraso para mostrar y ocultar 

<!-- Delay in tooltip -->
<div class="row" style="margin:40px">
    <button type="button" class="btn btn-warning"
        data-toggle="tooltip" data-placement="right"
        data-delay="1000"
        title="Don't click on Warning Button">
        Warning
    </button>
</div>

1. En el código anterior, hemos utilizado el atributo de retraso de datos para retrasar el número de información sobre herramientas asignado a este atributo en ms, es decir, la información sobre herramientas se retrasará durante 1000 ms.
2. Podemos agregar diferentes intervalos de tiempo de retraso para mostrar y ocultar la información sobre herramientas. 

Código HTML: 

<!-- Delay in tooltip -->
<div class="row" style="margin:40px">
    <button type="button" class="btn btn-warning"
        data-toggle="tooltip" data-placement="right"
        title="Don't click on Warning Button">
        Warning
    </button>
</div>

1. No hay cambios en el código html. 

Código jQuery: 

<script>
    $(document).ready(function () {
        // jQuery Attribute value selector
        $('[data-toggle="tooltip"]').tooltip({
            delay: { "show": 1000, "hide": 2000 }
        });
    });
</script>

• Activación de la información sobre herramientas : podemos agregar un evento que activará una información sobre herramientas, de forma predeterminada, se activa una información sobre herramientas al » pasar el mouse y enfocar «, varios eventos que se permiten son: hacer clic, pasar el mouse, enfocar y manual. 

<!-- triggering the  tooltip -->
<div class="row" style="margin:40px">
    <button type="button" class="btn btn-warning"
        data-toggle="tooltip" data-placement="right"
        data-trigger="click"
        title="Don't click on Warning Button">
        Warning
    </button>
</div>

• En el código anterior, hemos utilizado el atributo de activación de datos y el valor está configurado para hacer clic , lo que significa que cuando el usuario haga clic en el elemento, aparecerá la información sobre herramientas.