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:
Thanks.
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