How to define tooltip text in CSS?

Question

I'd like to have tooltip text completely specified by CSS, and not in the dynamic-html portion of my application, so that styling and code can be completely separable (I'm taking the view that tooltip messages may be the concern of the UX department, or at least, a 3rd party user, and shouldn't have to hack around in the JavaScript-generating code to effect tooltip changes).

The following code isn't expected to completley work, but it doesn't work at all:

<!DOCTYPE html>
<html>
<style>
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}

.tooltip:after {
  content: "foo bar";
}
.tooltip:hover .tooltip:after {
  visibility: visible;
}
</style>
<body style="text-align:center;">

<p>Move the mouse over the text below:</p>

<div class="tooltip">Hover over me
</div>

</body>
</html>

In particular, though I've defined the after content, it isn't being displayed on hover:

.tooltip:after {
  content: "foo bar";
}
.tooltip:hover .tooltip:after {
  visibility: visible;
}

For reference, this was modified from the w3schools example

Not sure if this old answer is still applicable since it may predate pseudo elements: Tooltips, CSS only, Show text tooltip on mouseover using a class to define the text

J4R · Accepted Answer · 2020-03-05 20:11:02Z

4

there you go:

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip:after {
  content: "foo bar";
  position: absolute;
  top: -30px;
  right: 0;
  left: 0;
  display: none;
  text-align: center;
  background-color: #000;
  color: #fff;
  border-radius: 4px;
  padding: 2px;
}
.tooltip:hover:after {
  display: block;
}

<p>Move the mouse over the text below:</p>
<div class="tooltip">Hover over me</div>

if you want to change the position / look of the tooltip itself, change the styling of this part: .tooltip:after {}

edited Mar 5, 2020 at 20:11

answered Mar 5, 2020 at 20:04

J4R

1,1241 gold badge12 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

chazsolo Over a year ago

Recommend to post all of your code in your question as a snippet, not a link to a jsfiddle.

bbarker Over a year ago

It seems like you can also just stick all the styling into .tooltip:hover:after

Blorf · Accepted Answer · 2020-03-05 20:10:00Z

1

I believe your problem is this selector:

.tooltip:hover .tooltip:after

This CSS selector applies to an element with the class of 'tooltip' that is within a parent element that also has the class of 'tooltip'. You probably want:

.tooltip:hover::after

(Note that this won't work exactly with your example code because it applies style to .tooltip .tooltiptext, which also doesn't exist. You probably mean .tooltip::after here also.)

answered Mar 5, 2020 at 20:10

Blorf

5463 silver badges13 bronze badges

Comments

user2560539 · Accepted Answer · 2020-03-05 20:20:09Z

1

Here is a working version of the example in your question.

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip:after {
  opacity: 0;
}


.tooltip:hover:after {
  content: "foo bar";
  opacity: 1;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 0 6px 6px 6px;
  padding: 5px 0;

  /* Position the tooltip */
  position: absolute;
  margin: 0.5rem 0 0 0.5rem;
  z-index: 1;
}

<p>Move the mouse over the text below:</p>

<div class="tooltip">Hover over me</div>

answered Mar 5, 2020 at 20:20

user2560539

Collectives™ on Stack Overflow

How to define tooltip text in CSS?

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related