Tippy.js is the complete tooltip, popover, dropdown, and menu solution for the web, powered by Popper.

It's a generic abstraction for the logic and styling of elements that pop out from the flow of the document and float next to a reference element, overlaid on top of the UI.

Smart: optimized positioning engine for flipping and overflow prevention

optimized positioning engine for flipping and overflow prevention Universal: works with mouse, keyboard, and touch inputs

works with mouse, keyboard, and touch inputs Accessible: WAI-ARIA compliant

WAI-ARIA compliant Themeable: style via custom CSS, includes extra themes and animations

style via custom CSS, includes extra themes and animations Typed: TypeScript support out of the box

Ready to start? Visit Getting Started, or view a demo of Tippy's features below.

The default tippy tooltip looks like this:

My Button

It has a background color of #333 and an arrow pointing toward the element, and 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! ", }) ;

Tooltips can be placed in four base ways in relation to the reference element. Additionally, the tooltip can be shifted along the axis using the suffix -start or -end .

top top-start top-end right right-start right-end bottom bottom-start bottom-end left left-start left-end

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.

Default Round Large Small Wide Narrow

Tooltips can have different types of transition animations. By default, it's a simple fade (opacity transition).

#Extra included animations

These animations are included in the package and can be imported separately.

shift-away shift-away-subtle shift-away-extreme shift-toward shift-toward-subtle shift-toward-extreme scale scale-subtle scale-extreme perspective perspective-subtle perspective-extreme

#Material filling effect

Text

#Inertia / slingshot elastic effect

Add CSS spring physics to the animation using transition-timing-function .

scale scale-subtle scale-extreme

#CSS keyframe animations

Getting more advanced, you can use actual CSS animations ( @keyframes rules), for example using the animate.css package:

rubberBand tada

0 1000 [0, 500] [500, 0]

Tooltips can have custom styling.

#Included themes

These themes are included in the package and can be imported separately.

light light-border material translucent

#Custom themes

You can apply any CSS to a tippy via a theme.

gradient retro forest

Tooltips can also be triggered by click or focus events.

Click Focus

Tooltips can be interactive, allowing you to hover over and click inside them.

Interactive

#HTML Content

Tooltips can contain HTML.

HTML Content Dropdown

Tooltips can delay hiding or showing after a trigger.

500 [800, 0] [0, 800]

#Follow Cursor

Tooltips 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).

Default Horizontal Vertical Initial

Tooltips can be placed on SVG nodes, where followCursor: 'initial' becomes very useful, since it can be placed directly on the line.

Use a single tooltip 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 :

Text Text Text Text

Singleton tippy to group each tippy's delay: 500 :

Text Text Text Text

Singleton tippy with a transition:

Text Text Text Text

A tippy can be nested within another one.

Level 0

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.