0:13
¡Hola! En este tutorial vamos a trabajar con tres
componentes que nos van a permitir mostrar información de contexto,
si hay algunas acciones adicionales
a lo que puede sugerir un botón o una acción concreta y,
luego, desplegar contenido adicional, de diversas maneras.
Vamos a dar tres componentes;
los "tooltips", los "popovers" y los "modals".
Arranquemos con los "tooltips".
La forma de utilizarlo, es muy sencilla.
Vamos a, en este caso,
a agregar un "tooltip",
sobre el texto de "Hotel Buenos Aires. "
supongamos que estamos.
Vamos directo sobre el elemento del H5,
vamos a agregar el "data-toggle",
"tooltip", a esta altura,
debes estar familiarizado, "data-placement",
2:01
cuentan con clases de
tango gratis" y veamos qué sucede.
No está funcionando.
¿Por qué no está funcionando?
Lo que requiere el "tooltip";
y esto es algo que se indica,
claramente, en la documentación de Bootstrap,
es que definamos una "script" que
indique la activación de los "tooltip" dentro de nuestra página,
es decir, por default no se activa.
Es importante que lo tengas en cuenta,
porque sino va a pasar esto que nos pasó recién, que no está funcionando.
En este caso,
lo hice a propósito para que te quede grabado qué es lo que tienes que hacer.
Bien, entonces para activarlo ¿que vamos a hacer?,
vamos a crear un "script",
3:03
que vamos a definir en función y aquí
lo que vamos a hacer es crear una "query",
que vamos a indicar,
como vamos a poner un atributo va a ir entre corchetes; "data-toggle" igual "tooltip".
Sobre todos estos elementos ¿qué vamos a hacer?,
vamos a enviar el mensaje "tooltip" o ejecutar la función.
Bien, guardamos y aquí ya contamos con el "tooltip" activado.
Entonces, es importante recordar,
que precisamos definir el "script",
para que al comienzo de nuestra página,
se busquen en esta primera parte,
se evalúa la "query" de "jQuery", justamente,
que busca todos los elementos que tienen como
el atributo el "data-toggle", con valor "tooltip".
Sobre ese conjunto de elementos,
en cada uno de ellos aplicamos la función "tooltip" y
con esto logramos que se active el "tooltip",
al momento de posicionarnos sobre el elemento en cuestión.
Fíjate, que se activa sobre todo el elemento H5,
sobre el resto no hace nada, obviamente.
¿Y para qué vamos a usar estos "tooltip"?
Para indicar alguna información adicional que
querramos que el usuario sepa, sobre algún texto,
puede ser a veces en los términos y condiciones,
o en los manuales de uso,
o en alguna explicación o instrucción que quieras disponer en tu web.
Siempre hay, por ejemplo, palabras técnicas,
entonces sobre esas palabras técnicas,
se suelen incluir "tooltips" que aclaran el significado, el contenido o,
por ejemplo, es típico que en formularios donde a uno le piden el número de teléfono,
el número de pasaporte o documento.
Uno indique cuál es el formato esperado y a un "tooltip",
algunos ponen un signo de interrogación,
como indicando ayuda o el símbolo de interrogación,
directamente, y sobre ese,
se ponen los "tooltip" que indican el resultado esperado,
alguna sugerencia o ayuda sobre la información a ingresar.
En este caso vimos un ejemplo sencillo,
para aprender el uso.
Y sólo para recordarte,
por las dudas, lo venimos usando en todas las páginas,
pero es importante que tengas incluido
siempre cuando empecemos a trabajar con los componentes de JavaScript de bootstrap,
antes de cargar bootstrap,
tenemos que tener a "popper" y "jquery".
También, "popper" trae todos los elementos necesarios,
toda la librería que se necesite para usar tanto los,
son varios componentes, pero los más conocidos van a ser "tooltip" y "popover".
Entonces aquí indicamos que dentro de DIS nos quedamos con UMD,
la carpeta UMD y ahí dentro utilizamos el "popper.min.6".
Ezequiel LamónicaLicenciado en Ciencias de la Computación (UBA), IAE EMBA Candidate 2018.
