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.
- Programa:
<!DOCTYPE html><htmllang="en"><head><title>Tooltip</title><metacharset="utf-8"><metaname="viewport"content="width=device-width, initial-scale=1"><linkrel="stylesheet"href=<scriptsrc=</script><scriptsrc=</script><scriptsrc=</script></head><bodystyle="text-align:center;"><divclass="container"><h1style="color:green;"data-toggle="tooltip"title="Tooltip">GeeksforGeeks</h1></div><script>$(document).ready(function() {$('[data-toggle="tooltip"]').tooltip();});</script></body></html> - Producción:
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><htmllang="en"><head><title>Tooltip</title><metacharset="utf-8"><metaname="viewport"content="width=device-width, initial-scale=1"><linkrel="stylesheet"href=<scriptsrc=</script><scriptsrc=</script><scriptsrc=</script><style>body {text-align:center;}h1 {color: green;}.tooltip-inner{width:200px;height:100px;padding:4px;}</style></head><body><divclass="container"><h1data-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