Styling Tooltips and Excerpts

Available to all Guild Members

Tooltips, excerpts and article previews are some of the trickiest elements to style on your page. This article gives you some tools for styling them, and breaks down the way they're set up.

Tooltips, excerpts and previews

• Here is an example of a tooltip.
• Here is a simple tooltip made using variables
• Here is a advanced tooltip made using variables
• Here is a most advanced tooltip made using variables
• Here is an article with an excerpt
• Here is an article with a preview

Annoyed that the tooltip keeps disappearing on you when you move your mouse? On chrome-based browsers you can temporarily delete the code that hides them.

1. Right click the tooltip and go to developer tools > inspect element.
2. Find a tab called "Event Listeners" and open it
3. Look for a dropdown menu called "mouseout" and open it
4. Click 'remove' on all the event listeners.

Voila! The next time you mouse over the tooltip it'll remain up.

Styling

If all you want is to get some css to style these and move on, this is your section. Here's some css I put together to make it easier for you to style the tooltips and excerpts.
To use these, you'll want to paste the css into your Global CSS, also known as the Per World CSS. Learn more at the CSS guide on the codex.

Background Colour

To update the colour, switch out #1b1b1b for the colour you want.

Show CSS for Simple Tooltips & Excerpts

.user-css-presentation .tooltipster-borderless .tooltipster-box,
.user-css-presentation .tooltip-inner {
  background: #1b1b1b;
  opacity: 1;
}


.user-css-presentation .tooltip {
 opacity: 1;
}


.user-css-presentation .tooltipster-borderless.tooltipster-top .tooltipster-arrow-background,
.user-css-presentation .tooltipster-borderless.tooltipster-top .tooltipster-arrow-border,
.user-css-presentation .tooltip.bs-tooltip-top .tooltip-arrow::before {
  border-top-color: #1b1b1b;
}


.user-css-presentation .tooltipster-borderless.tooltipster-bottom .tooltipster-arrow-background,
.user-css-presentation .tooltipster-borderless.tooltipster-bottom .tooltipster-arrow-border,
.user-css-presentation .tooltip.bs-tooltip-bottom .tooltip-arrow::before {
  border-bottom-color: #1b1b1b;
}


.user-css-presentation .tooltipster-borderless.tooltipster-left .tooltipster-arrow-background,
.user-css-presentation .tooltipster-borderless.tooltipster-left .tooltipster-arrow-border,
.user-css-presentation .tooltip.bs-tooltip-start .tooltip-arrow::before {
  border-left-color: #1b1b1b;
}


.user-css-presentation .tooltipster-borderless.tooltipster-right .tooltipster-arrow-background,
.user-css-presentation .tooltipster-borderless.tooltipster-right .tooltipster-arrow-border,
.user-css-presentation .tooltip.bs-tooltip-end .tooltip-arrow::before {
  border-right-color: #1b1b1b;
}

---

Show CSS for All Tooltips, Excerpts & Previews*

.user-css-presentation .tooltipster-base .tooltipster-box,
.user-css-presentation .tooltip-inner {
  background: #1b1b1b;
  opacity: 1;
}


.user-css-presentation .tooltip {
 opacity: 1;
}


.user-css-presentation .tooltipster-base.tooltipster-top .tooltipster-arrow-background,
.user-css-presentation .tooltipster-base.tooltipster-top .tooltipster-arrow-border,
.user-css-presentation .tooltip.bs-tooltip-top .tooltip-arrow::before {
  border-top-color: #1b1b1b;
}


.user-css-presentation .tooltipster-base.tooltipster-bottom .tooltipster-arrow-background,
.user-css-presentation .tooltipster-base.tooltipster-bottom .tooltipster-arrow-border,
.user-css-presentation .tooltip.bs-tooltip-bottom .tooltip-arrow::before {
  border-bottom-color: #1b1b1b;
}


.user-css-presentation .tooltipster-base.tooltipster-left .tooltipster-arrow-background,
.user-css-presentation .tooltipster-base.tooltipster-left .tooltipster-arrow-border,
.user-css-presentation .tooltip.bs-tooltip-start .tooltip-arrow::before {
  border-left-color: #1b1b1b;
}


.user-css-presentation .tooltipster-base.tooltipster-right .tooltipster-arrow-background,
.user-css-presentation .tooltipster-base.tooltipster-right .tooltipster-arrow-border,
.user-css-presentation .tooltip.bs-tooltip-end .tooltip-arrow::before {
  border-right-color: #1b1b1b;
}

*Since advanced tooltips and article previews can contain anything, this CSS may require a lot of additional styling to remain legible.

Disabling the Preview Shake

@keyframes tooltipster-rotating {
  25% {
    transform: rotate(0);
  }
  75% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(0);
  }
}

Tooltip Content

This code will help you change the font size and colour, and it's where I recommend adding other changes you want to make to the content inside of the tooltips.
Simple Tooltips & Excerpts

.user-css-presentation .tooltipster-content,
.user-css-presentation .tooltip-inner {
 font-size: 16px;
 color: #fff;
}

All Tooltips, Excerpts & Previews

.user-css-presentation .tooltipster-base .tooltipster-content,
.user-css-presentation .tooltip-inner {
 font-size: 16px;
 color: #fff;
}

No Transparency

.user-css-presentation .tooltip {
 opacity: 1;
}

Dissecting the HTML

If you want to do fancier styling than what I provided above, you're probably going to want to know how tooltips work. Tooltips and excerpts might look and function similar but they're structured differently.
Tooltips are funky. The content technically doesn't exist on the page until a script pulls the information and generates the tooltip. When they disappear, they aren't just hidden, they cease to exist. Even though they're created with a different kind of code, they're still styled with CSS, and they still need to generate a chunk of HTML. I used the method mentioned at the start of this article to get them to stay, and inspected their structure and styling. Below you can see an example of the tooltip html, and the excerpt html.

Simple Tooltip HTML Structure

<div class="tooltipster-base tooltipster-sidetip tooltipster-borderless tooltipster-fade tooltipster-show tooltipster-top" style="min-width: 300px; max-width: 300px; z-index: 9999999; left: 74px; top: 486.266px; height: 59px; width: 300px; animation-duration: 350ms; transition-duration: 350ms;">
 <div class="tooltipster-box">
  <div class="tooltipster-content">
  	Tooltips show extra text on hover
  </div>
 </div>
 <div class="tooltipster-arrow" style="left:150px;">
  <div class="tooltipster-arrow-uncropped">
   <div class="tooltipster-arrow-border"> </div>
   <div class="tooltipster-arrow-background"> </div>
  </div>
 </div>
</div>

Article Excerpt HTML Structure

<div class="tooltip fade show bs-tooltip-top" style="position: absolute; inset: auto auto 0px 0px; margin: 0px; transform: translate(57px, -231.219px);">
	<div class="tooltip-arrow" style="position: absolute; left: 0px; transform: translate(169px, 0px);">
  ::before
 </div>
 <div class="tooltip-inner">
  This is where the excerpt will be.
 </div>
</div>

For your convenience, I've highlighted the css classes and the styling. When inspecting closer, we can see excerpts use selectors called .tooltip and other bootstrap classes, while tooltips and article previews exclusively use selectors named .tooltipster.
.tooltipster-base applies to all tooltips
.tooltipster-sidetip applies to all tooltips
.tooltipster-borderless is used for simple tooltips
.tooltipster-light is used for advanced tooltips

.tooltipster-fade controls how the tooltip fades
.tooltipster-show helps hide and reveal the tooltip

Inline CSS

In both cases there's examples of inline styling directly in the HTML. That's the part labelled style="". If you want to change something mentioned in that style="" block, you'll probably need to use !important.
If your goal is to make the tooltips bigger, you may want to play around with adding padding or a min-width to the tooltip content.

More Styles

To use these, you'll want to paste the css into your Global CSS, also known as the Per World CSS. Learn more at the CSS guide on the codex.
Solaris-Style Tooltips

These Solaris-style tooltips will also look slightly different depending on what fonts you use. For reference, the fonts I use are Oxygen for the main content of the tooltip, and Expletus Sans for the drop cap.

Show CSS for Solaris-Style Tooltips & Excerpts

.user-css-presentation .tooltipster-base .tooltipster-box, 
.user-css-presentation .tooltip-inner {
  background: #4c5a67;
  opacity: 1;
  box-shadow: 2px 2px 1px var(--shadow30);
  border: none;
  border-radius: 5px;
  padding: 5px;
}


.user-css-presentation .tooltipster-base.tooltipster-top .tooltipster-arrow-background, 
.user-css-presentation .tooltipster-base.tooltipster-top .tooltipster-arrow-border, 
.user-css-presentation .tooltip.bs-tooltip-top .tooltip-arrow::before {
  border-top-color: #4c5a67;
}


.user-css-presentation .tooltipster-base.tooltipster-bottom .tooltipster-arrow-background, 
.user-css-presentation .tooltipster-base.tooltipster-bottom .tooltipster-arrow-border, 
.user-css-presentation .tooltip.bs-tooltip-bottom .tooltip-arrow::before {
  border-bottom-color: #4c5a67;
}


.user-css-presentation .tooltipster-base.tooltipster-right .tooltipster-arrow-background, 
.user-css-presentation .tooltipster-base.tooltipster-right .tooltipster-arrow-border, 
.user-css-presentation .tooltip.bs-tooltip-right .tooltip-arrow::before {
  border-right-color: #4c5a67;
}


.user-css-presentation .tooltipster-base.tooltipster-left .tooltipster-arrow-background, 
.user-css-presentation .tooltipster-base.tooltipster-left .tooltipster-arrow-border, 
.user-css-presentation .tooltip.bs-tooltip-left .tooltip-arrow::before {
  border-left-color: #4c5a67;
}


.user-css-presentation .tooltipster-base .tooltipster-content, 
.user-css-presentation .tooltip-inner {
  font-size: 16px;
  color: #fff;
  padding: 15px 20px;
}


.user-css-presentation .tooltipster-base .tooltipster-content::first-letter,
.user-css-presentation .tooltip-inner::first-letter {
  font-size: 24px;
  line-height: 14px;
  color: #c5ccd4;
}

Tooltips show extra text on hover

---

Note-Style Tooltips

Swap out #f8f9fa to change the accent colour.

Show CSS for Note-Style Tooltips & Excerpts

.user-css-presentation .tooltipster-base .tooltipster-box, 
.user-css-presentation .tooltip-inner {
  background: #f8f9fa;
  border: none;
  opacity: 1;
  border-radius: 0;
  box-shadow: 2px 2px 5px #00000020;
}


.user-css-presentation .tooltipster-base .tooltipster-content, 
.user-css-presentation .tooltip-inner {
  color: #777;
}


.user-css-presentation .tooltipster-base.tooltipster-top .tooltipster-box,
.user-css-presentation .tooltip.bs-tooltip-top .tooltip-inner {
  border-bottom: 4px solid #24abdd;
}


.user-css-presentation .tooltipster-base.tooltipster-top .tooltipster-arrow-background, 
.user-css-presentation .tooltipster-base.tooltipster-top .tooltipster-arrow-border, 
.user-css-presentation .tooltip.bs-tooltip-top .tooltip-arrow::before {
  border-top-color: #24abdd;
}


.user-css-presentation .tooltipster-base.tooltipster-bottom .tooltipster-box,
.user-css-presentation .tooltip.bs-tooltip-bottom .tooltip-inner {
  border-top: 4px solid #24abdd;
}


.user-css-presentation .tooltipster-base.tooltipster-bottom .tooltipster-arrow-background, 
.user-css-presentation .tooltipster-base.tooltipster-bottom .tooltipster-arrow-border, 
.user-css-presentation .tooltip.bs-tooltip-bottom .tooltip-arrow::before {
  border-bottom-color: #24abdd;
}


.user-css-presentation .tooltipster-base.tooltipster-right .tooltipster-box,
.user-css-presentation .tooltip.bs-tooltip-right .tooltip-inner {
  border-left: 4px solid #24abdd;
}


.user-css-presentation .tooltipster-base.tooltipster-right .tooltipster-arrow-background, 
.user-css-presentation .tooltipster-base.tooltipster-right .tooltipster-arrow-border, 
.user-css-presentation .tooltip.bs-tooltip-right .tooltip-arrow::before {
  border-right-color: #24abdd;
}


.user-css-presentation .tooltipster-base.tooltipster-left .tooltipster-box,
.user-css-presentation .tooltip.bs-tooltip-left .tooltip-inner {
  border-right: 4px solid #24abdd;
}


.user-css-presentation .tooltipster-base.tooltipster-left .tooltipster-arrow-background, 
.user-css-presentation .tooltipster-base.tooltipster-left .tooltipster-arrow-border, 
.user-css-presentation .tooltip.bs-tooltip-left .tooltip-arrow::before {
  border-left-color: #24abdd;
}

Tooltips show extra text on hover

---

Fantasy-Style Tooltips

Inspired by game tooltips. This could look a lot better with a custom border!

Show CSS for Fantasy-Style Tooltips & Excerpts

.user-css-presentation .tooltipster-base .tooltipster-box, 
.user-css-presentation .tooltip-inner {
  opacity: 1;
  font-family: serif;
  font-style: italic;
  font-size: 16px;
  background-color: #ddd1bcfc;
  border: 5px double #b37619;
  padding: 5px;
  box-shadow: 2px 2px 5px #00000020;
}


.user-css-presentation .tooltipster-base.tooltipster-top .tooltipster-arrow-background, 
.user-css-presentation .tooltipster-base.tooltipster-top .tooltipster-arrow-border, 
.user-css-presentation .tooltip.bs-tooltip-top .tooltip-arrow::before {
  border-top-color: #b37619;
}


.user-css-presentation .tooltipster-base.tooltipster-bottom .tooltipster-arrow-background, 
.user-css-presentation .tooltipster-base.tooltipster-bottom .tooltipster-arrow-border, 
.user-css-presentation .tooltip.bs-tooltip-bottom .tooltip-arrow::before {
  border-bottom-color: #b37619;
}


.user-css-presentation .tooltipster-base.tooltipster-right .tooltipster-arrow-background, 
.user-css-presentation .tooltipster-base.tooltipster-right .tooltipster-arrow-border, 
.user-css-presentation .tooltip.bs-tooltip-right .tooltip-arrow::before {
  border-right-color: #b37619;
}


.user-css-presentation .tooltipster-base.tooltipster-left .tooltipster-arrow-background, 
.user-css-presentation .tooltipster-base.tooltipster-left .tooltipster-arrow-border, 
.user-css-presentation .tooltip.bs-tooltip-left .tooltip-arrow::before {
  border-left-color: #b37619;
}


.user-css-presentation .tooltipster-base .tooltipster-content, 
.user-css-presentation .tooltip-inner {
  color: #503a30;
}


.user-css-presentation .tooltipster-base .tooltipster-content::first-letter,
.user-css-presentation .tooltip-inner::first-letter {
  font-size: 24px;
  line-height: 14px;
  color: #b37619;
}

Tooltips show extra text on hover

See Also

Guides

CSS	CSS Repository · Styling Tooltips and Excerpts · Numbered Table of Content
Formatting	Advanced Formatting with Containers
Other	Resources