0
I’m trying to make a tooltip appear by hovering the mouse over a part of an image, but it’s not working, I tried it in two ways: The first was to put title in the image map, it appears the tooltip, but I can not edit the text, how to increase font and colors.
<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" />
The other way was using div, that way I can edit, but I can’t make the tooltip appear in the image, it appears in the div below the image!
<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>
Can anyone give a help or a direction on how to make this work? Thank you very much in advance!!!
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;
}
Really using title you won’t be able to style it.
– LeAndrade
Dude Check the CSS of your Tooltype that’s working but it’s wrong? Put this css there please
– hugocsl
And look at that answer to see if it settles. If not solved, speak ai https://answall.com/questions/101968/%C3%89-poss%C3%Advel-fazer-um-tooltip-com-css-puro
– hugocsl
@hugocsl I added there, it works, but only if I put in <div>, if I put in the <area> tag it doesn’t work, I’ll take a look at the link you sent, vlwss!
– Arthur Oliveira
Sometimes you don’t exactly need to use map to do this, take a look at this answer https://answall.com/questions/273399/howto map a-imagem-towork responsibly/273887#273887 . The other link I gave you didn’t find anything that serves you?
– hugocsl
You that tooltype exactly above the map? Or you want the tooltype when placing the mouse over the image like this: https://answall.com/questions/272609/problema-no-efeito-hover-com-less/272639#272639
– hugocsl
@hugocsl Sorry for the delay in responding, I traveled on holiday! So in my image I have several topics of text, I wanted when I positioned the mouse on a topic, it would open the tooltip and show an explanation about the text.
– Arthur Oliveira
@hugocsl The link that went through help, was what I wanted, but it’s not working here yet
– Arthur Oliveira
Is an image with the text, or is it a div with a text inside?
– hugocsl
@hugocsl is an image!
– Arthur Oliveira
@hugocsl I’m trying otherwise here, if it goes right here!
– Arthur Oliveira
Quiet, I just don’t understand yet why you’re using Map for this...
– hugocsl
@hugocsl Look at the images I’ve put in, where there’s Modulos and so on, that’s all an image that’s on the site, not html text. The map I use to select the part of the image that has the text I want to turn into a link!
– Arthur Oliveira
I think I get it. Each line of text will have its tooltype as I understand it.... But it would be an option yes. But I believe that in your case a simple UL LI, "invisible" (without content), inside a div with this image would make it easier for you. Or else make UL LI with the same text, use an image with text does not make any sense, until pq Google will not index this txto, and if the client wants to change the text, take a sentence for example, this will happen your Map besides you have to make another image... Think about it
– hugocsl
@hugocsl Yes, even that’s what I was doing, changing everything to HTML text, that’s working. It will be much easier if you need to change in the future! Thank you very much for your help!
– Arthur Oliveira