0

There are a lot of tooltip solutions on Stack Overflow, ie. ways of showing some text or HTML when the user hovers over some other text. However, I can't seem to find one that:

  • is pure HTML + CSS
  • allows the tooltip to be inline (eg. doesn't require a <div> or other block element)
  • allows HTML tooltip content (potentially with display:block)

These requirements come from wanting to provide definitions of terms inline, inside paragraphs of text, and I'd like for those definitions to be able to contain block-display HTML content (eg. paragraphs and images).

Most of the CSS-only solutions I find seem to work by nesting the "tooltip" definition inside the hover target's HTML. However, that's impossible if you want the term to be inline, but its definition to be block, because you'd have to nest block content inside an inline tag.

Is there any other approach I can use that lets me have words or phrases inside paragraphs as "hover targets", but then show HTML hover definitions when that happens ... without Javascript?

4
  • Would you be able to convert the paragraphs to divs with suitable formatting. Sounds a bit drastic but the only way I can think of the allow the hoverable text to be in an inline-block, for example, and still have legal HTML.
    – A Haworth
    Jan 23, 2021 at 23:59
  • The core issue is that any sort of "put the pop over element inside the hover element" will violate the rules of HTML: it will put block content inside inline content. So, I'm looking for either a "trick" to get around that core limit ... OR (more likely) some other way of triggering the pop over text, that utilizes any mechanism other than sticking the pop-over inside the hover element. Alternatively, if that's impossible, if anyone can explain why you can never trigger a popover ... without sticking it inside the hover (and without JS) ... I'd accept that too. Jan 25, 2021 at 16:08
  • 1
    Can't you put block content in an inline-block element? W3C validator doesn't complain and I thought that's what inline-blocks were.
    – A Haworth
    Jan 25, 2021 at 16:45
  • For some reason I forgot about them; could you put that in an answer? Jan 26, 2021 at 1:47

1 Answer 1

5
+50

If it is allowable to change the markup of the actual text to replace inline elements (p is tprobably the most likely to need this) with divs + suitable CSS, you can insert tooltip content within divs which are inline-block.

This means any block content can be held in the tooltip.

Here's a trivial example:

.inline {
  display:inline-block;
  position: relative;
}
.inline .content {
  display: none;
  position: absolute;
  top: 1em;
  left: 0;
  z-index: 99999;
  border-style: solid;
  background-color: white;
}
.inline:hover .content {
  display: block;
}
<div>I am not hoverable.
    <div class="inline">But I am hoverable.&nbsp; 
      <div class="content">I am tooltip content and I've got an image in me... 
        <img src="https://picsum.photos/200"/>
        <div>...and another div</div>
      </div>
    </div>I am not hoverable.
</div>

Of course, there's the question of how to ensure the tooltip is visible on all types of devices and where to place it, but that's another question and something ordinary span type tooltips have to solve too.

1
  • I had a problem with the entire .inline block wrapping when the width was limited. I changed it to inline from inline-block and solved the wrapping problem. I have a lot more text than your example. So far, I haven't notice any drawback to the change.
    – curt
    Sep 22 at 16:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.