---
title: Motivation
path: /v5/motivation/
index: 17
---

### Why tooltips and popovers?

Both are elements positioned near a "reference" element, and are hidden until
they are triggered. They help conserve space by hiding secondary information or
functionality behind a hover or click. They are positioned outside the normal
flow of the document so when they are triggered, they are overlaid on top of the
existing UI without disrupting the flow of content.

Tippy.js distinguishes them in the following way:

- A **tooltip** is an element containing simple text content describing a
  particular element. It's hidden until the user desires more information from
  the element, e.g. before deciding to click a button.
- A **popover** is an interactive HTML tooltip. It can be a dropdown, menu, or
  any other kind of box that pops out from the normal flow of the document. This
  type of element contains non-vital functionality and can be hidden behind a
  click or hover to conserve space.

Both of these are called a "tippy" when using Tippy.js!

### Tippy.js

**Size: 5.5 KB (core)** (including Popper: 12.8 KB)

> **Note**
>
> (core) means the core JS & CSS. If importing more themes, animations, plugins,
> or addons, the size will increase.

Tippy is an abstraction over Popper and provides a set of features and defaults
that make creating tooltip and popover elements easy.

But, how does Tippy compare to other solutions?

### Comparison with Popper.js

**Size: 7.3 KB**

Popper.js is a positioning engine, not a tooltip library. Popper's only goal is
to position an absolutely positioned element (the tooltip) near another element
(the reference).

Since the element is absolutely positioned, naively centering it above the
reference element can cause it to:

- **Overflow the boundary** (viewport, window, scrollParent) and therefore get
  cut off
- **Overlap its reference element (due to overflow prevention)**, so it should
  flip to the opposite side
- **Detach from the reference element** if inside a scrolling container

Popper solves all of these problems. The expected logic to do this is very
complex, so this is effectively a "baseline" library if you want to even use
popper elements (tooltips, popovers, dropdowns) in your app in the first place
without them having poor UX.

If you want to build the appearance and behavior of your popper elements from
scratch, this is a fantastic library. If you want "out of the box" (abstracted)
behavior, then using Tippy might be better.

Tippy takes advantage of Popper as a dependency, so you can use them together
without incurring additional cost:

```js
import Popper from 'popper.js';
import tippy from 'tippy.js';
```

If you're using the CDN, the `Popper` constructor will already be available.

### Comparison with CSS tooltip libraries like Microtip or Balloon.css

**Size: 1 KB**

CSS tooltips can be tiny in size, but come with some drawbacks:

- Lack of positioning engine means overflow prevention & flipping are not
  possible
- Interactivity can be complicated or inaccessible
- Using HTML content within them is cumbersome (especially with UI libraries
  like React), with limited dynamism for updating content or reacting to state
- No dynamic arrow positioning or features like `followCursor`

### Comparison with Tooltipster

**Size: 10 KB** (including jQuery: 40 KB)

Tooltipster is a fantastic library with very similar functionality, but requires
a jQuery dependency, unlike Tippy. To many people these days, this is a
deal-breaker! jQuery's minzipped size is about 30 KB, and Tooltipster including
CSS is about 10 KB. To people using frameworks like React, Vue, or Angular, it
can be hard to deal with such a large dependency.