Skip to content
Tippy Logo

Tippy.js

v5.0.3

Themes

Tippy is highly themeable through CSS. The sky is the limit when it comes to their appearance!

#Included themes

To use the light, light-border, or material themes shown in the demo, you must import them since they are separate from the main CSS file.

Only import the themes you actually use to conserve size and/or HTTP requests.

import 'tippy.js/themes/light.css';
import 'tippy.js/themes/light-border.css';
import 'tippy.js/themes/material.css';
import 'tippy.js/themes/translucent.css';
tippy('button', {
  theme: 'light',
});

#Tippy elements

To learn how to create a theme, it's helpful to understand the basic structure of a tippy element:

<div class="tippy-popper">
  <div class="tippy-tooltip" data-placement="top">
    <div class="tippy-content">
      My content
    </div>
  </div>
</div>

A tippy is essentially three nested divs.

  • tippy-popper is the outermost node. It is what Popper.js uses to position the tippy. You don't need to apply any styles to this element.
  • tippy-tooltip is the actual tooltip node.
  • tippy-content is the content node.

Depending on the props supplied, there will exist other elements inside it:

<div class="tippy-popper">
  <div class="tippy-tooltip" data-placement="top">
    <div class="tippy-backdrop"></div> <!-- animateFill: true -->
    <div class="tippy-arrow"></div> <!-- arrow: true -->
    <div class="tippy-content">
      My content
    </div>
  </div>
</div>

#Browser DevTools

It's highly recommended you inspect a tippy element via your browser's DevTools. An easy way to do this is to give it hideOnClick: false and trigger: 'click' props so that it stays visible when focus is switched to the DevTools window.

The tippy element by default gets appended to the very end of the <body>, so you should scroll down the elements panel.

Note: If interactive: true, then by default the tippy is appended to the reference element's parentNode instead.

#Creating a theme

Themes are created by including a class on the tippy-tooltip element as part of a selector in the form .tippy-tooltip.x-theme. Let's demonstrate this by creating our own theme called tomato.

.tippy-tooltip.tomato-theme {
  background-color: tomato;
  color: yellow;
}

To apply the theme, specify a theme prop without the -theme suffix:

tippy('button', {
  theme: 'tomato',
});

#Styling the arrow

There are two types of arrows available: traditional CSS arrows (using the border trick), and a custom round SVG arrow.

#CSS arrow

To style the default (sharp) CSS arrow, you'll need to target each different base placement (using the data-placement attribute on .tippy-tooltip element) and apply it to the .tippy-arrow element:

.tippy-tooltip.tomato-theme[data-placement^='top'] .tippy-arrow {
  border-top-color: tomato;
}
.tippy-tooltip.tomato-theme[data-placement^='bottom'] .tippy-arrow {
  border-bottom-color: tomato;
}
.tippy-tooltip.tomato-theme[data-placement^='left'] .tippy-arrow {
  border-left-color: tomato;
}
.tippy-tooltip.tomato-theme[data-placement^='right'] .tippy-arrow {
  border-right-color: tomato;
}

#SVG arrow

First import the svg-arrow.css stylesheet for SVG arrow styling:

import 'tippy.js/dist/svg-arrow.css';

To color an SVG arrow, it's as simple as specifying the fill and targeting .tippy-svg-arrow:

.tippy-tooltip.tomato-theme .tippy-svg-arrow {
  fill: tomato;
}

There is a default round arrow SVG shape exported from the package for you to use (seen on the demo).

Node:

import {roundArrow} from 'tippy.js';

tippy(reference, {
  arrow: roundArrow,
});

Browser:

tippy(reference, {
  arrow: tippy.roundArrow,
});

#Changing the arrow size

#Option 1: transform: scale()

This is the easiest technique and works for most cases:

.tippy-tooltip.tomato-theme .tippy-arrow {
  transform: scale(1.5);
}

#Option 2: Pixel increase

If your tippy theme has a border (e.g. the included light-border theme), then the transform: scale() technique distorts the border width of the arrow. Instead, you will need to change the size of the arrow in pixels directly.

You will also need to change the size of the border pesudo-elements (::before and ::after) as well. It's recommended to investigate the CSS of the arrow via DevTools.

.tippy-tooltip.tomato-theme[data-placement^='top'] .tippy-arrow {
  border-width: 12px 12px 0;
  border-top-color: tomato;
}

/* And so on for each placement... */