Agregando un tooltip

Resumen

En esta clase aprenderemos a incluir abreviaciones, que es un componente que le permite al visitante de tu página tener una definición inmediata de una palabra. Para más información checa este website: https://getbootstrap.com/docs/4.1/content/typography/#abbreviations y también agregaremos tooltips un plugin de jQuery que ya viene incluído en Bootstrap: https://getbootstrap.com/docs/4.1/components/tooltips/
Reto: Incorpora otro tooltip en tu sitio.

Sergio Ivan Santacruz Madrigal

student•

¿Que es un tooltip?
Un tooltip (también llamada descripción emergente) es una herramienta de ayuda visual, que funciona al situar el cursor sobre algún elemento gráfico, mostrando una ayuda adicional para informar al usuario de la finalidad del elemento sobre el que se encuentra.

Los tooltip son una variación de los globos de ayuda y es un complemento muy usado en programación y diseño, dado que proporcionan información adicional sin necesidad de que el usuario la solicite de forma activa.

Roberto Del Valle

student•

Muchas gracias por la informacion extra.

Harold David Avila Sabogal

student•

que buena información

Daniel Alejandro Salazar Martinez

student•

Actualización para usarlo en Bootstrap 5: Usar la etiqueta abbr de la siguiente manera:

<abbr title="5 min talk" data-bs-toggle="tooltip">ignite</abbr>

En el archivo index.js colocar lo siguiente:

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl)
})

Daniel Franklin Chavez Sanchez

student•

Muchas gracias, también vi la documentación y está acorde a ella

Ramiro Godoy

student•

Buena esa, a noviembre 2022, esta solución funciona!

José Tuzinkievicz

student•

Mi tooltip :p Sé que el diseño es grotesco pero quería probar poner una imagen.

Harold David Avila Sabogal

student•

Épico

Facundo Nicolás García Martoni

teacher•

Legendario

Sergio Ivan Santacruz Madrigal

student•

¿Qué es un Ignite?
Ignite es un evento de charlas ultrarrápidas de 5 minutos exactos, apoyadas por 20 transparencias programadas para avanzar cada 15 segundos. Están presentadas por gente que tiene una idea, una historia o una visión, y el valor de subirse al escenario para compartirlo con su comunidad. Ignite se celebra en la actualidad en más de 100 ciudades alrededor del mundo.

¿Qué tiene de especial?
La idea central de Ignite es “encender” (Ignite en inglés). Encender la curiosidad. Encender la inspiración. Encender las ideas. Establecer conexiones entre asistentes, oradores y colaboradores

fuente: http://hemeroteca.innovaspain.com/detalle_noticia.php?id=3183

Iván Toro

student•

Buen resumen.

Jose L. Figueroa

student•

Muy bueno, gracias.

Jairo Merea Dueñas

student•

IMPORTANTE

Si estas en el 2021 y no te funcional el tootip, prueba este codigo

En html

data-bs-toggle="tooltip"```

En js

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

Kevin FG

student•

pense que en la version 5 ya no se usaba jquery 🤔

Carlos Morales

student•

Que excelente aporte, por no revisar los comentarios lo busque por mi parte y me costo un poco encontrarlo.

Gracias porque esto me recuerdo estar pendiente de la sección de aportes hehe.

Eduardo Reyes

student•

Para el nuevo bootstrap 5, lo que debemos incluir dentro del archivo .js es lo siguiente.

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl)
})

Néstor Duque

student•

Para cambiar el color de un tooltip, escriben en el .css

.tooltip-inner { background-color: #3662da; }

Emiliano Luna George

student•

Buen aporte graias!

Jaime Diaz

student•

Mi reto agregando el tooltip sobre el botón enviar y cambié un poco el aspecto del “text-decoration” de la palabra “charla ignite” por si tienen ojo de pixel 😃
Manito arriba si quieren que les comparta muy pronto este pequeño Trick 😄

Saludos.

Enrique Alexis Lopez Araujo

student•

Nos podrias compartir el trick para modificar bien el text-decoration por que las palabras si no se alcanzan aprecia correctamente.

Saludos!

Kathleen M. Bucarito P.

student•

Lo único que hice fue colocar dentro del abbr un style="text-decoration:none;". ¿Qué hicieron ustedes? ¡Saludos!

Alberto Castro Flores

student•

para bootstrap 5 en vez de hacer lo que hace sasha en el index.js copien esto:

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl)
})

y el ignite seria asi:

<span data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
        ignite
       </span>

GustavOo Hidalgo Brito

student•

Te has lucido bro

Teofilo Rosales Gama

student•

Para usar mas de un tooltip debes encerrar el elemento deseado en un abbr por ejem :

<div class="form-row">
    <div class="form-group col-12 col-md-6">
        <abbr data-toggle="tooltip" title="Colocar nombre">
            <input type="text" class="form-control" placeholder="Nombre">
          </abbr>
      </div>
    <div class="form-group col-12 col-md-6">
       <input type="text" class="form-control" placeholder="Apellido">
   </div>
</div>

Juan Miguel Jimenez

student•

También puedes agregar los atributos directamente a la etiqueta input

<input data-toggle="tooltip" title="Colocar nombre" type="text" class="form-control" placeholder="Nombre"/>

Harold David Avila Sabogal

student•

que buena información

Nazareno Aznar Altamiranda

student•

Si quieren eliminar los puntitos/linea debajo del texto que indica un tooltip simplemente usan "text-decoration: none" especificamente donde necesiten

Alexander Valencia

student•

++¿Que es un tooltip?++ Un tooltip (también llamada descripción emergente) es una herramienta de ayuda visual, que funciona al situar el cursor sobre algún elemento gráfico, mostrando una ayuda adicional para informar al usuario de la finalidad del elemento sobre el que se encuentra.

Los tooltip son una variación de los globos de ayuda y es un complemento muy usado en programación y diseño, dado que proporcionan información adicional sin necesidad de que el usuario la solicite de forma activa.

Damián López

student•

¿Que hace exactamente la funcion de JS? si no la hago, el tooltip sale de igual manera

Roberto Saenz

student•

Reto cumplido jeje

Carlos Raez

student•

holaaa me gustaria hacerlo en React.js!!! me pueden ayudar???
muchas gracias

Daniel Esteves

student•

¡Hola! En React puedes implementar básicamente los mismo que con HTML no habría mucha diferencia, pero ya que necesitas jQuery te recomiendo una librería que se llama react-bootstrap que puede realizar esta implementación por ti

Sergio Ivan Santacruz Madrigal

student•

Utilizar el tooltip sobre un buttom:

<button type="button" class="btn btn-secondary" 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-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
  Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
  Tooltip on left
</button>

Harold David Avila Sabogal

student•

que buena información

Kevin Parra Lopez

student•

Julio 2020 - a alguien le funciona los tooltips? Me sale un signo de pregunta al pasar el mouse sobre la palabra seleccionada

Wandy Rafael Santana Evangelista

student•

Hola @Kmp535 -Puedes checar la implementacion en la documentacion, revisa si la sintaxis es correcta. Checalo aqui: Documentacion

Recuerda, #NuncaParesDeAprender 💚

Daniel Pedroza

student•

Además recuerda activar con Javascript todos los tooltips en la página así:

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

minuto 2:15 de "Agregando un tooltip" Curso de Bootstrap

César Augusto Cortés Labrada

student•

Bueno en 2022 con bootstrap 5.2 la documentación dice que se debe poner en el js.

const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))

En el html me quedó así:

<p>Anótate como orador en un charla <abbr data-bs-toggle="tooltip" class="text-decoration-none" title="charlas de 5 minutos">ignite</abbr>, cuentanos de qué quieres hablar!</p>

Funcionó perfecto.

Andrés David Loaiza Zamudio

student•

https://getbootstrap.com/docs/5.0/components/tooltips/ https://getbootstrap.com/docs/5.0/content/typography/#abbreviations

Fredy Frasser

student•