CSS Only Accessible Tooltip & Popover – pop-pop.css

pop-pop.css is a simple, accessible, flexible, customizable CSS tooltip & popover library for the modern web & mobile design.

Easy to implement via HTML data attributes. Fully customizable via SCSS.

How to use it:

1. Install & download.

# Yarn
$ yarn add @sn8z/pop-pop.css
# NPM
$ npm install @sn8z/pop-pop.css --save

2. Load the compiled stylesheet pop-pop.min.css in the document.

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

3. Add the data-pop attribute to the target element and define the tooltip content in the aria-label attribute.

<button aria-label="Tooltip Content Here" 
        data-pop>
        Basic Tooltip
</button>

4. Customize the position of the tooltip. Default: top.

<button aria-label="Tooltip Content Here" 
        data-pop="bottom">
        Position: Bottom
</button>
<button aria-label="Tooltip Content Here" 
        data-pop="left"">
        Position: Left
</button>
<button aria-label="Tooltip Content Here" 
        data-pop="right">
        Position: Right
</button>

5. With an arrow indicator.

<button aria-label="Tooltip Content Here" 
        data-pop-arrow>
        With Arrow Indicator
</button>

6. Disable the border-radius.

<button aria-label="Tooltip Content Here" 
        data-pop-no-radius>
        No Border Radius
</button>

7. Disable the shadow effect.

<button aria-label="Tooltip Content Here" 
        data-pop-no-shadow>
        No Shadow
</button>

8. Specify the time to wait before showing the tooltip on hover.

• short: 0.5 seconds
• medium: 1.5 seconds
• long: 3 seconds

<button aria-label="Tooltip Content Here" 
        data-pop-delay="medium">
        With Delay
</button>

9. Make the tooltip always be visible.

<button aria-label="Tooltip Content Here" 
        data-pop-show">
        Always Visible
</button>

10. Override the default variables in the pop-pop.scss.

:root {
  --pop-text-color: #efefef;
  --pop-bg-color: #252525;
  --pop-min-width: 0px;
  --pop-word-wrap: none;
  --pop-white-space: nowrap;
  --pop-shadow: 0px 0px 5px var(--pop-shadow-color);
  --pop-shadow-color: #252525;
  --pop-transition-delay: 0.2s;
  --pop-animation-speed: 0.1s;
  --pop-border-radius: 5px;
  --pop-padding: 8px;
  --pop-offset: 15px;
  --pop-font-size: 12px;
  --pop-arrow-size: 5px;
  --pop-z: 999;
}