website/src/pages/v5/themes.mdx
Tippies can have any custom styling via CSS.
The package comes with themes for you to use:
lightlight-bordermaterialtranslucentThey need to be imported separately.
import 'tippy.js/themes/light.css';
Pass the theme name as the theme prop:
tippy('button', {
theme: 'light',
});
To learn how to create a theme, it's helpful to understand the basic structure of a tippy element:
<!-- prettier-ignore --><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:
<!-- prettier-ignore --><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>
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',
});
There are two types of arrows:
border-width)<svg> element)To style the default CSS arrow, you'll need to target each different base
placement using the data-placement attribute 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;
}
First import the svg-arrow.css stylesheet for SVG arrow styling:
import 'tippy.js/dist/svg-arrow.css';
To color an SVG arrow, specify fill and target .tippy-svg-arrow:
.tippy-tooltip.tomato-theme .tippy-svg-arrow {
fill: tomato;
}
The shape isn't dependent on the placement for styling, which is why it doesn't require the CSS arrow's more verbose styles.
There is a default round arrow SVG shape exported from the package for you to use.
tippy(targets, {
arrow: tippy.roundArrow,
});
import {roundArrow} from 'tippy.js';
tippy(targets, {
arrow: roundArrow,
});
transform: scale()This is the easiest technique and works for most cases:
.tippy-tooltip.tomato-theme .tippy-arrow {
transform: scale(1.5);
}
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 pseudo-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... */
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 gets appended to the very end of the <body>, so you should
scroll down the elements panel. If interactive: true, then the tippy is
appended to the reference element's parentNode instead.