Display text near the mouse pointer when resting it on an image

Asked

Viewed 103 times

1

I am searching since yesterday how to display a text while resting the mouse pointer on an image and see information (as a title, but where I can edit the font color, background and etc) and with the help of a friend that was the closest I got:

O que acontece quando descanso o mouse em cima de uma imagem

You can’t see the mouse pointer because it’s a print, but the mouse is on top of the red bag, the item on the upper right side of the screen, next to the red spades.

The problem is that instead of the text appearing at the foot of the mouse pointer (as in a title) it always appears in that upper left corner. I wanted to leave like this:

Tooltip posicionada corretamente abaixo do ponteiro do mouse

Also, unlike the title I want the message to appear instantly when resting the mouse, instead of appearing with delay. Here the link of a page where you can see a template working perfectly

[data-tooltip] {
  position: relative;
  font-weight: bold;
  cursor: help;
}

[data-tooltip]:after {
  display: none;
  position: absolute;
  top: -5px;
  left: calc(100% + 2px);
  padding: 5px;
  z-index: 10;
  font-size: 12px;
  border-radius: 3px;
  content: attr(data-tooltip);
  white-space: nowrap;
  background-color: #000;
  color: Yellow;
}

[data-tooltip]:hover:after {
  display: block;
}
<div>
  <span data-tooltip="Unclear Backpack"><img src="https://picsum.photos/200" ></span>
</div>

css of the img class, which defines the position where each image will appear

#piv_flex .itm { background-image: url("/engine/img/bg.png"); }
#piv_flex .itm-1  { left: 48px; top: 39px; }
#piv_flex .itm-2  { left: 11px; top: 53px; }
#piv_flex .itm-3  { left: 85px; top: 53px; }
#piv_flex .itm-4  { left: 48px; top: 76px; }
#piv_flex .itm-5  { left: 85px; top: 90px; }
#piv_flex .itm-6  { left: 11px; top: 90px; }
#piv_flex .itm-7  { left: 48px; top: 113px; }
#piv_flex .itm-8  { left: 48px; top: 150px; }
#piv_flex .itm-9  { left: 11px; top: 127px; }
#piv_flex .itm-10 { left: 85px; top: 127px; }
html css

  • I simplified the code because there is no need to insert PHP in your question. I removed the class from the tag <img> because you didn’t put her CSS. If important, edit the question by adding the class and the corresponding CSS again

  • Dude no. After all it was not very clear what you want... the tooltip is already appearing in your code example... Do you want the tooltip to follow the mouse pointer? Or that the tooltip appears centered just below the image?

  • Accessing the page that I Linked on the topic of seeing better if you are on a desktop/notebook, but basically I want the tooltip to be below the mouse pointer, exactly as it would be on a title, do not need to follow the mouse. Centered below the image would also solve

1 answer

0

What you want is called Tooltip. I advise using Bootstrap to do it more easily. I made it very simple and easy to understand, then you just pack whatever you want.

.tooltip {
  position: relative;
  display: inline-block;
}


.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #343434;
  color: #f6f604;
  text-align: center;
  padding: 5px 0;
  border: 1px solid;
  border-color: black;
  border-radius: 6px;
  position: absolute;
  z-index: 1;
  top: 65%;
  left: 175%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
}


.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}
<div class="tooltip">
  <img class="" src="http://items.znote.eu/12520.gif">
  <span class="tooltiptext">Hearth Backpack</span>
</div>

  • So, the information box keeps popping up on the upper left... is it a conflict with my css? I always get into this exact problem with every code I try

  • Use the code the way I sent it. If the error continues, it must be some CSS conflict between the class. Use the inspect element in the <div> and take a look, see if you can find anything.

  • inspecting: https://pastebin.com/yAHeaNx4

  • You have a class equal to .tooltip? What about CSS in the <img>?

  • I edited the response regarding HTML and CSS. Run the code here through the stack and see if it’s right.

  • I have no other class like .tooltip, and the img class I will add in the main post. With your new code I continued in it, but agr to getting to think it’s conflict with img css p..

  • Strange. Can you send me a fiddle containing the full code?

  • Try to remove the classes from the image. The code is with the image you showed in Pastebin and is working perfectly.

  • I took all the classes from the images but continued in the same... n managed to do the fiddle pq the code uses queries + local files. Would java script make it easier?

  • I don’t think so. Only CSS can meet all this need. But if so, use Bootstrap, because Tooltip is already ready. Here is the link to the Tooltip documentation: https://getbootstrap.com.br/docs/4.1/components/tooltips/

Show 5 more comments

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.