Pop-Pop.css is a pure CSS tooltip library with no dependencies and support for CSS custom properties.

Installation

NPM or Yarn

npm install @sn8z/pop-pop.css

yarn add @sn8z/pop-pop.css

CDN

<link rel="stylesheet" href="https://unpkg.com/@sn8z/pop-pop.css@latest/dist/pop-pop.min.css">

Download

If you want you can just download the normal or the minified CSS file from the GitHub repo and include it in your HTML as you would normally.

<link rel="stylesheet" href="pop-pop.css">

Basic usage

Just add the attributes aria-label and data-pop to the tag where you want a tooltip to appear.

<p aria-label="Tooltip text" data-pop>...</p>

Docs

Attributes marked with * can be globally modified with the use of CSS custom properties instead of applying the attribute everywhere.

Positioning Arrow Multiline Radius Shadow Delay Visibility CSS custom properties Limitations

Positioning (data-pop)

<button aria-label="I'm above!" data-pop="top">
	Hover me!
</button>

<button aria-label="I'm to the right!" data-pop="right">
	Hover me!
</button>

<button aria-label="I'm below!" data-pop="bottom">
	Hover me!
</button>

<button aria-label="I'm to the left!" data-pop="left">
	Hover me!
</button>

Arrow (data-pop-arrow)

<button aria-label="I've an arrow!" data-pop data-pop-arrow>
	Hover me!
</button>

Multiline* (data-pop-multiline)

<button aria-label="..." data-pop data-pop-multiline>
	Hover me!
</button>

Radius* (data-pop-no-radius)

<button aria-label="I've no border-radius" data-pop data-pop-no-radius>
	Hover me!
</button>

Shadow* (data-pop-no-shadow)

<button aria-label="I've no box-shadow" data-pop data-pop-no-shadow>
	Hover me!
</button>

Delay* (data-pop-delay)

<button aria-label="I'm delayed!" data-pop data-pop-delay="short">
	Hover me for 0.5 seconds!
</button>

<button aria-label="I'm delayed!" data-pop data-pop-delay="medium">
	Hover me for 1.5 seconds!
</button>

<button aria-label="I'm delayed!" data-pop data-pop-delay="long">
	Hover me for 3 seconds!
</button>

Visibility

By default tooltips will show on hover and focus but what if you want a tooltip to always show? Then you can simply add the attribute data-pop-show. This can also be used to programmatically show and hide a tooltip by applying the attribute with the help of Javascript for example.

<button aria-label="I'm always visible!" data-pop data-pop-show data-pop-arrow>
	I'm a button!
</button>

I'll show a tooltip!

<button aria-label="I'm always visible!" data-pop data-pop-show data-pop-arrow>
	I'm a button!
</button>

CSS custom properties

You can use CSS custom properties to customize your tooltips even further! This will reduce the HTML attribute clutter and give you the possibility to globally modify your tooltips. This can be done by overwriting the CSS variables in your own CSS file.

:root {
  --pop-bg-color: #ff0000;
}

CSS custom property	Default	Description
--pop-text-color	#efefef	Tooltip text color
--pop-bg-color	#252525	Tooltip background color
--pop-shadow	0px 0px 5px var(--pop-shadow-color)	Tooltip box-shadow settings
--pop-shadow-color	#252525	Tooltip box-shadow color
--pop-transition-delay	0.2s	The delay before the tooltip is shown
--pop-animation-speed	0.1s	Tooltip animation speed
--pop-border-radius	5px	Tooltip border radius
--pop-padding	8px	Tooltip padding
--pop-offset	15px	Tooltip offset from element
--pop-font-size	12px	Font size (will set both font-size & line-height)
--pop-arrow-size	5px	Size of the tooltip arrow
--pop-word-wrap	none	Decides how to break the text when using mutiple lines
--pop-white-space	nowrap	specifies how white-space inside the tooltip is handled
--pop-min-width	0px	The minimum width of the tooltip
--pop-z	999	The z-index of the tooltip

You can also style a single tooltip by targeting its element id or class and overwrite the CSS properties. Make sure you target the ::after pseudo element if you want to style the tooltip and ::before if you want to style the arrow!

<p id="unique" aria-label="Text here" data-pop data-pop-show data-pop-arrow>...</p>

#unique::after {
  --pop-bg-color: #FF0000;
  --pop-font-size: 16px;
  --pop-padding: 20px;
}
#unique::before {
  --pop-bg-color: #FF0000;
}

Known issues

Non-closing tags

Since Pop-Pop.css makes use of pseudo elements it won't work on it's own with non closing tags (img, input, hr etc.). In these cases you could wrap another tag around it and apply Pop-Pop.css to it instead.

<span aria-label="POP POP!" data-pop><img src="..."/></span>

Other pseudo elements

If the element has another ::after or ::before pseudo element attached to it Pop-Pop.css won't be able to work correctly.

overflow: hidden;

The tooltip will be cut off if the parent element has the attribute overflow: hidden; enabled and there's limited space. This is unfortunately something that can't be solved with CSS alone.