estou tentando fazer com que apareça um tooltip ao passar o mouse sobre uma parte de uma imagem, porém não está dando certo, tentei de duas formas: A primeira foi colocar title no map da imagem, ele aparece o tooltip, porém não consigo editar o texto, como aumentar fonte e cores.
<img src="imagens/modulos.png" alt="" usemap="#Map" />
<map name="Map" id="Map">
<area alt="" title="Texto teste" href="#" shape="rect"
coords="5,100,286,117" />
A outra forma foi usando div, dessa maneira eu consigo editar, porém não consigo fazer com que o tooltip apareça na imagem, ele aparece na div em baixo da imagem!
<img src="imagens/modulos.png" alt="" usemap="#Map" />
<map name="Map" id="Map">
<div class="wrapper">
<area alt="" href="#" shape="rect" coords="6,211,337,230" />
<div class="tooltip">sdagasdgasdgasdg</div>
</div>
Alguém pode dar uma ajuda ou uma direção de como fazer isso funcionar? Muito obrigado desde já!!!
CSS tooltip
.wrapper .tooltip:before {
bottom: -20px;
content: " ";
display: block;
height: 20px;
left: 0;
position: absolute;
width: 100%;
}
.wrapper .tooltip:after {
border-left: solid transparent 10px;
border-right: solid transparent 10px;
border-top: solid #1496bb 10px;
bottom: -10px;
content: " ";
height: 0;
left: 50%;
margin-left: -13px;
position: absolute;
width: 0;
}
.wrapper:hover .tooltip {
opacity: 1;
pointer-events: auto;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
.lte8 .wrapper .tooltip {
display: none;
}
.lte8 .wrapper:hover .tooltip {
display: block;
}