CODEWITHSUNDEEP
css
bbarker
bbarker

Reputation: 13088

How to define tooltip text in CSS?

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

Upvotes: 1

Views: 9082

Answers (3)

user2560539
user2560539

Reputation:

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>

Upvotes: 1

J4R
J4R

Reputation: 1104

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 {}

Upvotes: 3

Blorf
Blorf

Reputation: 546

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.)

Upvotes: 1

Related Questions