htmlimagealt

Is there any way to use img alt as tooltip?


I have a page with many images, here is an example:

<section>
    <div><img src="capas/livro1.jpg" alt="Harry Potter e a Pedra Filosofal"></div>
    <div><img src="capas/livro2.jpg" alt="Harry Potter e a Câmara Secreta"></div>
    <div><img src="capas/livro3.jpg" alt="Harry Potter e o Prisioneiro de Azkaban"></div>
    <div><img src="capas/livro4.jpg" alt="Harry Potter e o Cálice de Fogo"></div>
    <div><img src="capas/livro5.jpg" alt="Harry Potter e o Enigma do Príncipe"></div>
    <div><img src="capas/livro6.jpg" alt="Harry Potter e a Ordem da Fênix"></div>
    <div><img src="capas/livro7.jpg" alt="Harry Potter e as Relíquias da Morte"></div>
    <div><img src="capas/livro8.jpg" alt="Pai Rico, Pai Pobre"></div>
    <div><img src="capas/livro9.jpg" alt="Quem Mexeu no Meu Queijo?"></div>
    <div><img src="capas/livro10.jpg" alt="O Guia do Pão Duro"></div>
.
.
.
</section>

I'd like to show tooltip without using title. Is it possible using only HTML, CSS or JavaScript?

Something like this:

Tooltip

Thanks.


Solution

  • Forgoing the fact that alt should not be used for a tool tip, really you should use title, or better still figure and figcaption, you can do this with CSS alone.

    Use the :after psuedo element with hover then use content:attr(alt) to get the value of the alt attribute.

    EDIT : Annoyingly this doesn't work in microsoft browsers as they don't support img::after.

    .covers>div {
      /*Tooltip will be positioned relative to this*/
      position: relative;
    }
    
    /*Tooltip magic*/
    .covers img:hover:after {
      display: block;
      content: attr(alt);
      position: absolute;
      bottom: 5px;
      background-color: rgba(200, 200, 200, 0.8);
      border-radius:2px;
      padding:2px;
    }
    
    .covers img {
      min-height: 100px;
      max-width: 300px
    }
    <section class="covers">
      <div><img src="capas/livro1.jpg" alt="Harry Potter e a Pedra Filosofal"></div>
      <div><img src="capas/livro2.jpg" alt="Harry Potter e a Câmara Secreta"></div>
      <div><img src="capas/livro3.jpg" alt="Harry Potter e o Prisioneiro de Azkaban"></div>
      <div><img src="capas/livro4.jpg" alt="Harry Potter e o Cálice de Fogo"></div>
      <div><img src="capas/livro5.jpg" alt="Harry Potter e o Enigma do Príncipe"></div>
      <div><img src="capas/livro6.jpg" alt="Harry Potter e a Ordem da Fênix"></div>
      <div><img src="capas/livro7.jpg" alt="Harry Potter e as Relíquias da Morte"></div>
      <div><img src="capas/livro8.jpg" alt="Pai Rico, Pai Pobre"></div>
      <div><img src="capas/livro9.jpg" alt="Quem Mexeu no Meu Queijo?"></div>
      <div><img src="capas/livro10.jpg" alt="O Guia do Pão Duro"></div>
      . . .
    </section>

    Here's how I'd actually do it with more semantically correct tags

    .covers>figure {
      /*Tooltip will be positioned relative to this*/
      position: relative;
    }
    
    .covers>figure>figcaption {
      display:none;
    }
    
    
    /*Tooltip magic*/
    .covers figure:hover > figcaption {
      display: block;
      position: absolute;
      bottom: 5px;
      right: 0;
      background-color: rgba(200, 200, 200, 0.8);
      border-radius: 2px;
      padding: 2px;
    }
    
    .covers figure {
      min-height: 100px;
    }
    <section class="covers">
      <figure><img src="capas/livro1.jpg" alt="Harry Potter e a Pedra Filosofal cover">
        <figcaption><strong>Harry Potter</strong> e a Pedra Filosofal</figcaption>
      </figure>
      <figure><img src="capas/livro2.jpg" alt="Harry Potter e a Câmara Secreta cover">
        <figcaption><strong>Harry Potter</strong> e a Câmara Secreta</figcaption>
      </figure>
      <figure><img src="capas/livro3.jpg" alt="Harry Potter e o Prisioneiro de Azkaban cover">
        <figcaption><strong>Harry Potter</strong> e o Prisioneiro de Azkaban</figcaption>
      </figure>
      <figure><img src="capas/livro4.jpg" alt="Harry Potter e o Cálice de Fogo cover">
        <figcaption><strong>Harry Potter</strong> e o Cálice de Fogo</figcaption>
      </figure>
      <figure><img src="capas/livro5.jpg" alt="Harry Potter e o Enigma do Príncipe cover">
        <figcaption><strong>Harry Potter</strong> e o Enigma do Príncipe</figcaption>
      </figure>
      <figure><img src="capas/livro6.jpg" alt="Harry Potter e a Ordem da Fênix cover">
        <figcaption><strong>Harry Potter</strong> e a Ordem da Fênix</figcaption>
      </figure>
      <figure><img src="capas/livro7.jpg" alt="Harry Potter e as Relíquias da Morte cover">
        <figcaption><strong>Harry Potter</strong> e as Relíquias da Morte</figcaption>
      </figure>
      <figure><img src="capas/livro8.jpg" alt="Pai Rico, Pai Pobre cover">
        <figcaption>Pai Rico, Pai Pobre</figcaption>
      </figure>
      <figure><img src="capas/livro9.jpg" alt="Quem Mexeu no Meu Queijo? cover">
        <figcaption>Quem Mexeu no Meu Queijo?</figcaption>
      </figure>
      <figure><img src="capas/livro10.jpg" alt="O Guia do Pão Duro cover">
        <figcaption>O Guia do Pão Duro</figcaption>
      </figure>
      . . .
    </section>

    Going this route you can have additional styling within the tool tip if needed