8

I know it is possible to create a custom "tooltip" with the :hover:after selectors and to align this tooltip relative to the original element by marking the original element as position:relative and the tooltip as absolute.

HTML:

test
<span custom-tooltip="testing a custom tooltip" class="tooltip">
    test
</span>
test

CSS:

.tooltip {
    position: relative;
}

.tooltip:hover:after {
    content: attr(custom-tooltip);
    position: absolute;
    background: black;
    color: white;
}

However, I must use absolute values to position or size this :after element

top: 30px;
left: -30px;
width: 300px;

What if I want to make the element as wide as it needs to be (Percentages are relative to the parent element creating a large vertical box so I can't tell it to go width: 100%)

And centered under the parent (left: -50% results in it being moved 50% of the parent to the left, not centered)

Is this possible without javascript? (If not, are there some magic selectors or functions to get the width of this or that and calc() the correct values?

David Wolf
  • 1,400
  • 1
  • 9
  • 18
J V
  • 11,402
  • 10
  • 52
  • 72
  • You can make it as wide as it needs to be by only declaring a left or right value, without any width. I have tried to get it centered using only CSS before to no avail. Hopefully someone else has a solution! – joshnh Nov 24 '11 at 02:26
  • In my tests it still holds the width of the parent object if you don't give it a specific width (Or in the case of `left:` it continues until the right boundry of the parent object) – J V Nov 24 '11 at 13:32
  • Here is a pure CSS tooltip I did a while ago, the width is flexible. http://joshuanhibbert.com/sandbox/css-tooltips – joshnh Nov 24 '11 at 21:49
  • Very nice, shame it scrolls off the screen if so positioned though. – J V Nov 24 '11 at 22:04
  • I'm not sure I follow what you mean by scroll off the screen? – joshnh Nov 24 '11 at 22:52
  • If you were to randomly position a link near the right side of the browser the tooltip would still scroll off-screen – J V Nov 24 '11 at 23:05
  • Ah, yes, unfortunately. I believe that like the centering, some sort of JavaScript will need to be used to avoid that. – joshnh Nov 24 '11 at 23:18

2 Answers2

9

You can force the tooltip onto a single line by using white-space:nowrap. I don't know of any way to center the tooltip without forcing a specific width on both the tooltip and the item the tooltip applies to. Here's a general-purpose example (without centering):

<p>Lorem <span tooltip="Lorem ipsum">ipsum</span> dolor sit amet.</p>

And the CSS:

*[tooltip] {
  position: relative;
  border-bottom: dotted 1px #000;
}
*[tooltip]:hover:before {
  content: attr(tooltip);
  background-color: #000;
  color: #fff;
  top: 1em;
  position: absolute;
  white-space: nowrap;
}

Note that I'm using :before instead of :after. If you want to center the tooltip and are able to define a fixed width, you can use this CSS instead:

*[tooltip] {
  position: relative;
  display: inline-block;
  text-align: center;
  width: 200px;
  margin: 0 -75px;
}
*[tooltip]:hover:before {
  content: attr(tooltip);
  background-color: #000;
  color: #fff;
  top: 1em;
  position: absolute;
  white-space: nowrap;
  width: 200px;
}

Here, the item is given a fixed width equal to the width of the tooltip then negative left/right margins to collapse it back down to the desired size. Note the addition of display:inline-block and text-align:center.

This technique isn't practical for inline tooltips, but works well for buttons and "call to action" links.

Brandon Gano
  • 6,430
  • 1
  • 25
  • 25
  • The `nowrap` trick is great, but it allows the tooltip to scroll off screen (And create a nasty scrollbar and potentially screw up a layout) how would you prevent that? – J V Nov 24 '11 at 13:42
  • You can prevent the scroll with `overflow-x:hidden` on the body, but the tooltip would just be cut off. CSS doesn't have any support for position-aware styles, so the only way to change the behavior near the edge of the window would be with JavaScript. – Brandon Gano Nov 24 '11 at 18:36
  • All right, I suppose that works. So the only way to really make such a tooltip work is with javascript? – J V Nov 24 '11 at 18:58
  • Yes. And there are plenty of tooltip plug-ins available for jQuery or any other JavaScript library. – Brandon Gano Nov 25 '11 at 20:34
  • Great solution! One note: **::after** does not work with img or input elements, so a wrapper must be added for this kind of replaced elements, and the tooltip assigned to the wrapper. [More info](http://stackoverflow.com/questions/6949148/css-after-not-adding-content-to-certain-elements) – TechAurelian Oct 08 '13 at 12:45
0
.tooltip
 {
  display: inline;
  position: relative;
 }
.tooltip:hover:after
 {
  background: #333;
  background: rgba(0,0,0,.8);
  border-radius: 5px;
  bottom: 26px;
  color: #fff;
  content: attr(title);
  left: 20%;
  padding: 5px 15px;
  position: absolute;
  z-index: 98;
  width: 220px;
 }

code from TalkersCode complete code here Create CSS3 Tooltip

railly
  • 1