Cómo crear y colocar una información sobre herramientas en Bootstrap 5
ToolTip es un cuadro emergente pequeño que aparece cuando un usuario mueve el cursor sobre un botón o un enlace que le da al usuario, conocimiento o una pista sobre ese botón o enlace específico. Las información sobre herramientas son útiles para que los nuevos usuarios de un sitio web los guarden de confusión o cualquier tipo de problema al explorar su sitio web.
Este artículo te enseñará sobre
- Creación de información sobre herramientas en Bootstrap 5
- Posición de servicios de herramientas
Cómo crear información sobre herramientas
Para crear un uso de información sobre herramientas, atributo de datos "data-bs-toggle = ”ToolTiP" en tus etiqueta o etiqueta y el texto que se muestra en la información de herramientas debe escribirse utilizando el atributo de título.
Montada de herramientas con enlace
Coloque el cursor aquí
Montada de herramientas con botón
$ (documento).Ready (function ()
$ ('[data-bs-toggle = "tooltip"]').tooltip ();
);
Ahora déjame decirte que en Bootstrap 5 para crear una información sobre herramientas necesitamos agregar atributos de datos en etiqueta o etiqueta y también escriba una jQuery para habilitarlo. Así que divide el proceso de creación en pasos que te darán una mejor comprensión.
Pasos
Crear una información sobre herramientas en Bootstrap 5 es un simple proceso de dos pasos
Paso 1: Agregar data-bs-toggle = "tooltip" y title = "ToolTip El texto va aquí" atributos en tu o etiqueta.
Montada de herramientas con enlace
Coloque el cursor aquí
Montada de herramientas con botón
Paso 2: Habilitar información sobre herramientas escribiendo JQuery siguiendo el código
Posicionamiento de información sobre herramientas
Entonces, colocar una información sobre herramientas como su requisito solo Agregar data-bs-placsion = "top/right/left/fondo" para usted o etiqueta Para cambiar la posición de información sobre herramientas.
Conclusión
Las información sobre herramientas se crean agregando data-bs-toggle = "tooltip" y title = "ToolTip El texto va aquí" atributos en o etiqueta y habilitarlo escribiendo un código JavaScript. Para posicionar solo Agregue el atributo o etiqueta data-bs-placsion = ”superior/inferior/derecha/izquierda".