Tippy Tooltip
Placement Tooltips
A highly customizable vanilla JS tooltip & popover library
The default tippy tooltip looks like this when given no options. It has a nifty backdrop filling animation!
Top
Bottom
Left
Right
Top-Start
Top-End
<span class="btn btn-sm bg-primary text-white" title="I'm a Tippy tooltip!" tabindex="0" data-plugin="tippy" data-tippy-placement="top">Top</span>
<span class="btn btn-sm bg-primary text-white" title="I'm a Tippy tooltip!" tabindex="0" data-plugin="tippy" data-tippy-placement="bottom">Bottom</span>
<span class="btn btn-sm bg-primary text-white" title="I'm a Tippy tooltip!" tabindex="0" data-plugin="tippy" data-tippy-placement="left">Left</span>
<span class="btn btn-sm bg-primary text-white" title="I'm a Tippy tooltip!" tabindex="0" data-plugin="tippy" data-tippy-placement="right">Right</span>
<span class="btn btn-sm bg-primary text-white" title="I'm a Tippy tooltip!" tabindex="0" data-plugin="tippy" data-tippy-placement="top-start">Top-Start</span>
<span class="btn btn-sm bg-primary text-white" title="I'm a Tippy tooltip!" tabindex="0" data-plugin="tippy" data-tippy-placement="top-end">Top-End</span>
Arrows Tooltips
Arrows point toward the reference element.
Default
Round
Wide
Skinny
Small
Large
<span class="btn btn-sm bg-primary text-white" title="I'm a Tippy tooltip!" tabindex="0" data-plugin="tippy" data-tippy-arrow="true" data-tippy-animation="fade">Default</span>
<span class="btn btn-sm bg-primary text-white" title="I'm a Tippy tooltip!" tabindex="0" data-plugin="tippy" data-tippy-arrow="true" data-tippy-arrowType="round" data-tippy-animation="fade">Round</span>
<span class="btn btn-sm bg-primary text-white" title="I'm a Tippy tooltip!" tabindex="0" data-plugin="tippy" data-tippy-arrow="true" data-tippy-arrowTransform="scaleX(1.5)" data-tippy-animation="fade">Wide</span>
<span class="btn btn-sm bg-primary text-white" title="I'm a Tippy tooltip!" tabindex="0" data-plugin="tippy" data-tippy-arrow="true" data-tippy-arrowTransform="scaleX(0.75)" data-tippy-animation="fade">Skinny</span>
<span class="btn btn-sm bg-primary text-white" title="I'm a Tippy tooltip!" tabindex="0" data-plugin="tippy" data-tippy-arrow="true" data-tippy-arrowTransform="scale(0.75)" data-tippy-animation="fade">Small</span>
<span class="btn btn-sm bg-primary text-white" title="I'm a Tippy tooltip!" tabindex="0" data-plugin="tippy" data-tippy-arrow="true" data-tippy-arrowTransform="scale(1.35)" data-tippy-animation="fade">Large</span>
Interactivity Tooltips
Tooltips can be interactive, meaning they won't hide when you hover over or click on them.
Interactive (hover)
Interactive (click)
<span class="btn btn-sm bg-primary text-white" title="I'm a Tippy tooltip!" tabindex="0" data-plugin="tippy" data-tippy-interactive="true">Interactive (hover)</span>
<span class="btn btn-sm bg-primary text-white" title="I'm a Tippy tooltip!" tabindex="0" data-plugin="tippy" data-tippy-interactive="true" data-tippy-trigger="click">Interactive (click)</span>
Duration Tooltips
A tippy can have different transition durations.
0ms
200ms
1000ms
[500ms, 200ms]
<span class="btn btn-sm bg-primary text-white" title="I'm a Tippy tooltip!" tabindex="0" data-plugin="tippy" data-tippy-duration="0">0ms</span>
<span class="btn btn-sm bg-primary text-white" title="I'm a Tippy tooltip!" tabindex="0" data-plugin="tippy" data-tippy-duration="200">200ms</span>
<span class="btn btn-sm bg-primary text-white" title="I'm a Tippy tooltip!" tabindex="0" data-plugin="tippy" data-tippy-duration="1000">1000ms</span>
<span class="btn btn-sm bg-primary text-white" title="I'm a Tippy tooltip!" tabindex="0" data-plugin="tippy" data-tippy-duration="[500, 200]">[500ms, 200ms]</span>
Animations Tooltips
Tooltips can have different types of animations.
Shift away
Shift toward
Fade
Scale
Perspective
Inertia (shift-away)
Inertia (shift-toward)
Inertia (scale)
Inertia (perspective)
<span class="btn btn-sm bg-primary text-white" title="I'm a Tippy tooltip!" tabindex="0" data-plugin="tippy" data-tippy-animation="shift-away" data-tippy-arrow="true">Shift away</span>
<span class="btn btn-sm bg-primary text-white" title="I'm a Tippy tooltip!" tabindex="0" data-plugin="tippy" data-tippy-animation="shift-toward" data-tippy-arrow="true">Shift toward</span>
<span class="btn btn-sm bg-primary text-white" title="I'm a Tippy tooltip!" tabindex="0" data-plugin="tippy" data-tippy-animation="fade" data-tippy-arrow="true">Fade</span>
<span class="btn btn-sm bg-primary text-white" title="I'm a Tippy tooltip!" tabindex="0" data-plugin="tippy" data-tippy-animation="scale" data-tippy-arrow="true">Scale</span>
<span class="btn btn-sm bg-primary text-white" title="I'm a Tippy tooltip!" tabindex="0" data-plugin="tippy" data-tippy-animation="perspective" data-tippy-arrow="true">Perspective</span>
<span class="btn btn-sm bg-primary text-white" title="I'm a Tippy tooltip!" tabindex="0" data-plugin="tippy" data-tippy-animation="shift-away" data-tippy-inertia="true" data-tippy-duration="[600, 300]" data-tippy-arrow="true">Inertia (shift-away)</span>
<span class="btn btn-sm bg-primary text-white" title="I'm a Tippy tooltip!" tabindex="0" data-plugin="tippy" data-tippy-animation="shift-toward" data-tippy-inertia="true" data-tippy-duration="[600, 300]" data-tippy-arrow="true">Inertia (shift-toward)</span>
<span class="btn btn-sm bg-primary text-white" title="I'm a Tippy tooltip!" tabindex="0" data-plugin="tippy" data-tippy-animation="scale" data-tippy-inertia="true" data-tippy-duration="[600, 300]" data-tippy-arrow="true">Inertia (scale)</span>
<span class="btn btn-sm bg-primary text-white" title="I'm a Tippy tooltip!" tabindex="0" data-plugin="tippy" data-tippy-animation="perspective" data-tippy-inertia="true" data-tippy-duration="[600, 300]" data-tippy-arrow="true">Inertia (perspective)</span>
Themes Tooltips
A tippy can have any kind of theme you want! Creating a custom theme is a breeze.
Translucent
Light
Gradient
<span class="btn btn-sm bg-primary text-white" title="See-through!" tabindex="0" data-plugin="tippy" data-tippy-theme="translucent">Translucent</span>
<span class="btn btn-sm bg-primary text-white" title="A light Tooltip !" tabindex="0" data-plugin="tippy" data-tippy-theme="light" data-tippy-arrow="true">Light</span>
<span class="btn btn-sm bg-primary text-white" title="Awesome Gradient !" tabindex="0" data-plugin="tippy" data-tippy-theme="gradient">Gradient</span>
Misc Tooltips
Tippy has a ton of features, and it's constantly improving.
Follow cursor
Touch & Hold
Distance
Offset
Small
Large
<span class="btn btn-sm bg-primary text-white" title="See-through!" tabindex="0" data-plugin="tippy" data-tippy-theme="translucent">Translucent</span>
<span class="btn btn-sm bg-primary text-white" title="A light Tooltip !" tabindex="0" data-plugin="tippy" data-tippy-theme="light" data-tippy-arrow="true">Light</span>
<span class="btn btn-sm bg-primary text-white" title="Awesome Gradient !" tabindex="0" data-plugin="tippy" data-tippy-theme="gradient">Gradient</span>