TechBlogSD - Todo para WordPress y desarrollo WEB
Instrucciones de WEB y WordPress, noticias, reseñas de temas y complementos

¿Cómo crear información sobre herramientas de Bootstrap 5?

1

La información sobre herramientas es un fragmento de texto de marcador que aparece cuando pasa el mouse sobre un hipervínculo. En Bootstrap 5, hay ciertas cosas que debe tener en cuenta antes de intentar agregar información sobre herramientas. Si ha notado que la plantilla de inicio contiene una nueva biblioteca de JavaScript de terceros llamada Popper. Esto se utiliza principalmente para el componente de información sobre herramientas para el posicionamiento.

Este tutorial cubre los siguientes capítulos:

  1. Conceptos básicos de la información sobre herramientas de Bootstrap 5
  2. Inicialización de información sobre herramientas
  3. Uso de información sobre herramientas con etiqueta de anclaje
  4. Posicionamiento de información sobre herramientas
  5. Usar información sobre herramientas con botones
  6. Agregar contenido HTML en la información sobre herramientas
  7. Opciones de personalización

1 Conceptos básicos de la información sobre herramientas de Bootstrap

  • La información sobre herramientas es un componente de JavaScript, por lo que debe incluir archivos bootstrap.min.js en su plantilla HTML. Alternativamente, también puede utilizar el archivo de secuencia de comandos combinado bootstrap.bundle.min.js.
  • Además, para posicionar correctamente la información sobre herramientas, debe incluir popper.min.js en todo su código fuente.
  • La información sobre herramientas no se cargará de forma predeterminada debido al rendimiento de la carga de la página. Por lo tanto, debe inicializarse con el elemento principal para cargar en la página.
  • La secuencia de archivos de secuencia de comandos debe ser popper.min.js, bootstrap.min.js y luego la secuencia de comandos de inicialización.
  • No se utilizan imágenes en la información sobre herramientas y el concepto se basa en información sobre herramientas al estilo de Facebook creada con el complemento Tipsy jQuery.
  • No se mostrará la información sobre herramientas con una longitud de título cero.
  • Bootstrap utiliza la animación CSS y los atributos de datos para controlar el comportamiento de la información sobre herramientas.

2 Inicialización de información sobre herramientas en Bootstrap

A diferencia de otros componentes de Bootstrap, la información sobre herramientas debe inicializarse antes de su uso. Puede agregar una inicialización global como se muestra a continuación o usar una inicialización de nivel de elemento específico si es necesario.

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

A continuación se muestra el código para activar la información sobre herramientas en el nivel del elemento de anclaje.

<script> $("a").tooltip(); </script>

A continuación se muestra el código para usar el botón para inicializar:

<script> $("button").tooltip(); </script>

Recuerde que este código de secuencia de comandos debe agregarse justo después de los enlaces popper.min.js y bootstrap.min.js para que la información sobre herramientas funcione como se espera. Puede consultar el formato de la plantilla de inicio aquí.

3 Uso de la información sobre herramientas en la etiqueta de anclaje

Primero creemos una información sobre herramientas simple usando una etiqueta de anclaje. El código debería verse como a continuación:

<a href="#" data-toggle="tooltip" data-animation="false" title="This is a tooltip"> Content to Show </a>
  • Debe utilizar el atributo de alternancia de datos con el valor como información sobre herramientas.
  • La información sobre herramientas mostrará el texto del título ingresado en la ventana emergente al pasar el mouse.
  • El contenido que se va a mostrar es el texto de anclaje similar a un hipervínculo.

El resultado debería verse como a continuación en el navegador al pasar el mouse:

¿Cómo crear información sobre herramientas de Bootstrap 5?

4 información sobre herramientas de posicionamiento

Como puede ver en el ejemplo anterior, de forma predeterminada, la información sobre herramientas se colocará en la parte superior del contenido. Bootstrap le permite posicionarse en la parte superior, izquierda, derecha e inferior del texto de anclaje utilizando el atributo de ubicación de datos.

  • Use data-location = "top" para la posición superior. Esto es predeterminado, por lo que no es necesario mencionarlo explícitamente.
  • Utilice data-location = "bottom” para la posición inferior.
  • Utilice data-location = "right" para la posición correcta.
  • Utilice data-location = “left” para la posición izquierda.

5 información sobre herramientas en botones

Creemos cuatro información sobre herramientas con diferentes posiciones en el componente del botón.

<button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="Tooltip on top"> Tooltip on top </button> <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right"> Tooltip on right </button> <button type="button" class="btn btn-warning" 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>

El resultado en el navegador debería verse a continuación:

¿Cómo crear información sobre herramientas de Bootstrap 5?

6 Uso de contenido HTML dentro de la información sobre herramientas

De forma predeterminada, la información sobre herramientas solo admite el contenido de texto en su interior. Puede agregar etiquetas HTML mediante el atributo data-html = “true”. A continuación se muestra un ejemplo de cómo agregar contenido tachado dentro de la información sobre herramientas mediante etiquetas HTML ~…~ .

<a href="#" data-toggle="tooltip" data-html="true" title="<s>This is a strikethrough tooltip</s>"> Content to Show </a>

Como puede ver, el contenido dentro de la etiqueta del título se procesa con etiquetas HTML cuando se establece el atributo data-html = “true”. A continuación se muestra cómo se verá en el navegador:

¿Cómo crear información sobre herramientas de Bootstrap 5?

7 opciones de personalización de información sobre herramientas

Puede personalizar aún más la información sobre herramientas mediante el uso de atributos "datos-".

  • Deshabilite el efecto de desvanecimiento de CSS agregando el atributo data-animation = “false”.
  • Retraso de mostrar y ocultar con el atributo de retraso de datos.
  • Desplaza la información sobre herramientas del elemento usando data-offset.

Puede consultar más ejemplos de información sobre herramientas en el sitio de JavaScript de Popper.

Nota: La información sobre herramientas de Bootstrap 5 no funcionará en IE8 o versiones anteriores, ya que el navegador no es compatible con popper.


Aprenda Bootstrap 5 (índice )


Fuente de grabación: webnots.com
Deja una respuesta

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More