CODEWITHSUNDEEP
htmlhovertooltip
bigxtra
bigxtra

Reputation: 3

How to make a tolltip appear only when hovering over text?

I have to work with HTML files where the following tooltip is extensively used:

<div class="tooltip">
  Text
  <span class="popup">
  Tooltip
  </span>
</div>

And the CSS:

.tooltip span[class="popup"] {
                z-index:10;display:none; padding:7px 10px;
                }
.tooltip:hover span[class="popup"]{
                display:inline; position:absolute; color:#111;
                border:1px solid #DCA; background:#fffAF0;
          }

https://jsfiddle.net/f1tztx15/2/

My problem is that the tooltip not only appears when I hover over "Text" but also when I hover over the blank space at the right of "Text" (see below).

Tooltip appearing when blank space is hovered

Is there a way to limit the "hoverable" region to the text without changing the whole tooltip? (I don't really have the freedom to do that)

Thanks!

Upvotes: 0

Views: 795

Answers (1)

Joseph
Joseph

Reputation: 120

Try using CSS to limit the width or padding of the element.

Eg.

.tooltip: width: 100%; padding: 0px;

This could limit the width of your tooltip element.

You could also just use a <span> element. Which would also contain the element within its own bounds.

Upvotes: 0

Related Questions