Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Agregando un tooltip

16/21
Recursos

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.

Aportes 70

Preguntas 10

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

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)
})

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

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()
})```

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)
})

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

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

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>

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

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

Dandole un poco de contraste a “charla ignite”

En Bootstrap 5 es así:
HTML

<div class="col text-center">
            Llena el formulario y participa.
            Quizá hoy seas tu la nueva estrella de la <abbr data-bs-toggle="tooltip" data-bs-placement="top" title="El arte de crear y organizar sonidos y silencios">música!</abbr>
          </div>

En javascript

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

Obvio no usé los mismos testos de Sacha 😆✌

gracias sasha, muy bacano el tema de tooltips

Freddy habla sobre las Igntie Talks en el curso de Oratoria.

Deberían ver de qué va el fomato, está súper cool 😃

Solución del desafió, lo agregue en el nombre de Sacha

<h5 class="card-title mb-0"><abbr data-toggle="tooltip" title="Desarrollador Frontend">Sacha Lifszyc</abbr></h5>
<abbr data-toggle="tooltip" title="🤗🐇" class="text-decoration-none">Andrés Campuzano</abbr>

Ya quedo agregado el Tooltip
🌐 Código en GitHub: https://github.com/iJCode1/bootstrap4_platzi
.
Resultado:

Increíble que no me funciona eltooltip

Reto cumplido jeje

desafio hecho!

ok!

Genial!!! Aunque me confunció un poco la parte del plugin😪

Una muy buena herramienta para complementar con html ❤ grande bootstrap.

<div class="col text-center">
            Postulate como orador para dar una <abbr data-toggle="tooltip" data-placement="left" title="Charlas de 5 minutos">charla ignite</abbr>.
            Cuentanos de que te gustaría hablar!
          </div>

No conocia los ToolTips pero estan geniales y de gran ayuda.!! 😃

Copado

<<div class="form-row">
        <div class="form-group col-12 col-lg-8 offset-lg-2">
          <abbr data-toggle="tooltip" title="Coloca una descripcion como minimo de 280 caracteres">
          <textarea name="text" class="form-control form-control-lg" placeholder="¿Sobre que quieres hablar?" aria-describedby="emailHelp" required></textarea>
          <div class="valid-feedback">
            Correcto!!
          </div>
          <div class="invalid-feedback">
            Debes de escribir sobre qué quieres hablar.
          </div>
        </div>
      </div>>

Genial

Hola, ¿se puede cambiar el color de fondo del tooltip?, por defecto es color negro y me gustaría que fuera de otro color.

Gracias

Hola buenas tardes a todos.

le agregue un tooltip al botón de enviar.

![](Saludos

Así hice mi desafío:
<abbr data-toggle=“tooltip” title=“El equipo que lo hace todo posible”>Team Platzi</abbr>

Este curso me deja con una interrogante y la voy a escribir en comentarios por que me parece bueno generar una discusión sobre esto. Así que te invito a la pestaña de Preguntas.

Apuntes:
Bootstrap nos permite hacer referencia a una palabra y mostrar una pequeña descripción acerca de la misma a traves de tooltips.
abbr: Esta etiqueta es representada como una abreviación, junto con el atributo “title”, permite hacer una descripción acerca de la palabra abreviada.
A la etiqueta abbr, podemos incluirle un aributo llamado ‘data-toggle=”tooltip”’, a lo que posteriormente debemos crearle un script al final del documento html y escribir dentro del mismo lo siguiente:
$(function(){ $('[data-toggle="tooltip"').tooltip() })
Esto nos permitirá añadirle una mejor visibilidad al tooltip.

Una maravilla. 👨‍💻😎

<abbr title="Océano Pacífico central" data-toggle="tooltip">Hawái</abbr>

Agregando Js para activar el Tooltip $(function () { $('[data-toggle="tooltip"]').tooltip() })

<small><abbr data-toggle="tooltip" data-placement="top" title="Se parte de nuestro equipo">Conviértete en un</abbr></small>

Tooltip es una forma elegante de explicar una palabra desconocida o una abreviación.

Esto se me ocurrió para el reto

<abbr data-toggle="tooltip" data-placement="top" title="Es importante añadirlo para tener una noción de tu charla">titulo</abbr>

💚 Genial lo de los tooltip

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

Reto cumplido.

Reto cumplido xD

Aquí mi aporte.

<abbr data-toggle="tooltip" data-placement="top" title="Evento para creadores, emprendedores y entusiastas de la tecnología">Platzi Conf</abbr>

reto:
<div class="badges ">
<span class=“badge badge-warning”><abbr data-toggle=“tooltip” title=“Lenguaje de programación”>JavaScript</abbr </span>
<span class=“badge badge-platzi”>React</span>
</div>

Implementé mi tooltip en una card

<div class="col-12 col-md-6 col-lg-4 mb-4">
              <div class="card">
                  <img src="cvander.jpeg" class="card-img-top" alt="Foto de Christian">
                  <div class="card-body">
                    <div class="badges">
                      <span class="badge badge-warning"><abbr style="text-decoration: none" sanitize="true" data-toggle="tooltip" title="Lenguaje de programación del ámbito web"> JavaScript</abbr></span>
                      <span class="badge badge-info">Electron</span>
                      <span id="badgeRuby" class="badge badge-info">Ruby</span>
                    </div>
                    <h5 class="card-title mb-0">Christian Van Der H.</h5>
                    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eros sapien, convallis in erat vel, lacinia egestas sem. Nullam vitae tempor diam. Sed tortor augue, egestas sed tristique et, porttitor non massa. Sed enim nunc, tristique et neque ut, ornare venenatis dolor. </p>
                    
                 </div>
              </div>
          </div>

Implementé un tooltip para cada tarjeta de oradores en sus nombres. Está genial!

¿Cómo puedo crear un tooltip en forma de lista con viñetas?

Reto logrado

<h2><abbr data-toggle="tooltip" title="Persona que  expone un tema">Orador</abbr></h2>

Reto cumplido

Reto cumplido

<p class="d-none d-md-block">
                  Platzi Conf llega por pimera vez a Hawaii! Un evento para compartir con nuestra comunidad el conocimiento y experiencia de los expertos que están creando el futuro de internet. Ven a conocer a miembros del <abbr data-toggle="tooltip" title="Toda la familia Platzi">Team Platzi</abbr>, a otros estudiantes de Platzi y a los oradores de primer nivel que tenemos para ti. Te esperamos!
                </p>```

Reto cumplido:

<p class="d-none d-md-block">Platzi Conf llega por primera vez a Hawaii!! Un evento para
                                    compartir
                                    con nuestra comunidad, el conocimiento y experiencia
                                    de los expertos que están creando el futuro de internet.
                                    Ven a conocer a miembros del Team Platzi, a otros estudiantes de Platzi y a los
                                    oradores de primer nivel que tenemos para ti. <abbr data-toogle="tooltip" title="Ingresa a www.platzi.com">Te esperamos.</abbr>
                                </p>```

Reto cumplido

Vamos bien!

Reto cumplido!

RETO 6:

No tenia ni idea de esta herramienta, muy chevere.

Para hacer el tooltip con JavaScript Vanilla puro, sin jQuery, el código es el siguiente:

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

Mas info en https://v5.getbootstrap.com/docs/5.0/components/tooltips/ .
Ojo, que la versión 5 de bootstrap aún está sujeta a cambios mayores.

excelente clase, aunque no me gusto mucho el subrayado

excelente!!

Hola a todos!
Estoy de curioso y tratando de poner en práctica React, entonces he intentado hacer este curso con él. Para los que les había dado problemas también, yo lo resolvi descargando react-bootstrap al proyecto con npm install react-bootstrap dentro de su proyecto. Y usé esta url .
Espero les ayude también 😃