Utilizando tooltips

Loading...

From the course by Universidad Austral

Diseñando páginas web con Bootstrap 4

2 ratings

Universidad Austral

Diseñando páginas web con Bootstrap 4

2 ratings

Course 1 of 4 in the Specialization Full Stack Web Development en Español

Este curso te enseñará conceptos generales de desarrollo web del lado cliente, metodologías de trabajo y herramientas. Aprenderás sobre diseño responsive, grillas, y componentes CSS y Javascript de Bootstrap. Practicarás con preprocesadores de CSS, Less y Sass. También aplicarás conceptos básicos de Node.js y NPM para gestionar tus sitios web. Al finalizar este curso, habrás practicado con todas esas herramientas y serás capaz de diseñar una página web e implementar ese diseño con Bootstrap, crear un diseño responsive y preparar tu sitio web para salir a producción.

From the lesson

COMPONENTES JAVASCRIPT DE BOOTSTRAP

Este módulo comprende los componentes Javascript de Bootstrap. Aprenderás sobre pestañas, navegación con pestañas, navegación con botones, diferentes tipos de alertas, carroussel, scrollspy, affix y tooltips.

Mostrando contenido con modals10:36

Utilizando tooltips6:50

Utilizando popovers3:03

Meet the Instructors

Ezequiel Lamónica
Licenciado en Ciencias de la Computación (UBA), IAE EMBA Candidate 2018.

¡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",

ésto indica la ubicación que va a tener el "tooltip",

puede ser arriba, abajo, izquierda, derecha.

Como siempre, esto se va a manejar en inglés,

vamos a ponerle "top" y con el "title",

definimos cuál es el "tooltip".

Supongamos que aquí lo que queremos mostrar es;

"las primeras reservas,

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",

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".

Explore our Catalog

Join for free and get personalized recommendations, updates and offers.

Coursera provides universal access to the world’s best education, partnering with top universities and organizations to offer courses online.

© 2019 Coursera Inc. All rights reserved.

Download on the App Store

Get it on Google Play