Tippy.js – Tooltip, Popover, Dropdown, and Menu Library
Tippy.js is the complete tooltip, popover, dropdown, and menu solution for the
web, powered by Popper.
It provides the logic and optional styling of elements that “pop out” from the
flow of the document and float next to a target element.
Smart: will always float optimally in view
Universal: compatible with mouse, keyboard, and touch inputs
Customizable: fine-tunable functionality and fully stylable with CSS
Typed: TypeScript support
Ready to start? Visit Getting Started, or view a demo of
Tippy’s features below.
The default tippy tooltip looks like this:
It is triggered by either mouseenter or focus events so it appears when
hovered, focused via keyboard navigation, or tapped when using a touch device.
With a button element on the document like this:
<
button
id
="
myButton
">
My Button
</
button
>
You can initialize it like so:
tippy
(
'
#myButton
',
{
content
:
"
I'm a Tippy tooltip!
",
})
;
Your tippy can be placed on four different sides in relation to the reference
element. Additionally, it can be aligned to the reference element edge, rather
than being centered.
tippy
(
button
,
{
// default
placement
:
'
top
',
})
;
If a tippy cannot fit within its desired placement, it will flip to the opposite
placement if there is not enough space. In the above examples, flipping has been
disabled to demonstrate each placement properly.
The arrow that points toward the element can have its proportion or shape
modified, or be disabled completely.
tippy
(
button
,
{
// default
arrow
:
true
,
})
;
Your tippy can have any type of transition animations. By default, it’s a simple
fade (opacity transition).
tippy
(
button
,
{
// default
animation
:
'
fade
',
})
;
#Extra included animations
These animations are included in the package and can be imported separately.
#Material filling effect
#Inertia / slingshot elastic effect
Add CSS spring physics to the animation using transition-timing-function.
#CSS keyframe animations
Getting more advanced, you can use actual CSS animations (@keyframes rules),
for example using the animate.css package:
Your tippy can have custom styling.
tippy
(
button
,
{
theme
:
'
light
',
})
;
#Included themes
These themes are included in the package and can be imported separately.
#Custom themes
You can apply any CSS to a tippy via a theme.
Your tippy can be triggered by a variety of different events, including click,
focus, or any other event:
tippy
(
button
,
{
// default
trigger
:
'
click
',
})
;
Your tippy can be interactive, allowing you to hover over and click inside it.
tippy
(
button
,
{
interactive
:
true
,
})
;
#HTML Content
Your tippy can contain HTML.
tippy
(
button
,
{
content
:
'
<strong>Bolded <span style="color: aqua;">content</span></strong>
',
allowHTML
:
true
,
})
;
Your tippy can delay hiding or showing after a trigger.
tippy
(
button
,
{
delay
:
500
,
// ms
})
;
#Follow Cursor
Your tippy can follow the mouse cursor and abide by a certain axis.
Additionally, the tooltip can follow the cursor until it shows, at which point
it will stop following (initial).
tippy
(
button
,
{
followCursor
:
true
,
})
;
Your tippy can be placed on SVG nodes, where followCursor: 'initial' becomes
very useful, since it can be placed directly on the line.
Use a single tippy for many different reference elements. This allows you to
“group” tooltips with a shared timer to improve UX when elements near each other
have tooltips with a delay prop.
Non-singleton tippy with delay: 500:
Singleton tippy to group each tippy’s delay: 500:
Singleton tippy with a transition:
tippy
.
createSingleton
(
tippy
(
buttons
)
,
{
delay
:
500
,
})
;
View singletons in detail.
A tippy can be nested within another one.
This allows you to create a hover menu system.
The above is not a complete list of features. Tippy is capable of many more
things.