Tippy.js

Themes

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

Default themes

To use the light, light-border, google 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.

CDN

<head>
  <link 
    rel="stylesheet" 
    href="https://unpkg.com/tippy.js@4/themes/light.css" 
  />
  <link
    rel="stylesheet"
    href="https://unpkg.com/tippy.js@4/themes/light-border.css"
  />
  <link
    rel="stylesheet"
    href="https://unpkg.com/tippy.js@4/themes/google.css"
  />
  <link
    rel="stylesheet"
    href="https://unpkg.com/tippy.js@4/themes/translucent.css"
  />
</head>

Package managers

import 'tippy.js/themes/light.css'
import 'tippy.js/themes/light-border.css'
import 'tippy.js/themes/google.css'
import 'tippy.js/themes/translucent.css'

Tippy elements

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

<div class="tippy-popper">
  <div class="tippy-tooltip" x-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 options supplied, there will exist other elements inside it:

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

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.mythemename-theme. Let's demonstrate this by creating our own theme called tomato.

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

.tippy-tooltip.tomato-theme[data-animatefill] {
  background-color: transparent;
}

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

The backdrop element is the background "filling" effect that's enabled by default. You should color the background of both the tooltip and the backdrop. Ensure the tooltip's background is transparent if animateFill: true.

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

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

Styling the arrow

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

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

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

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

.tippy-tooltip.tomato-theme .tippy-roundarrow {
  fill: tomato;
}

Changing the arrow size

If you would like to increase or decrease the arrow's size, you can use transform: scale():

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

If you're using a bordered theme like light-border included in the package, then you should avoid using scale, because the 1px border also gets scaled, leading to distortion.

HTML Content AJAX