tooltip.css

A simple CSS tooltip.

Installation

npm install tooltip.css

Usage

CSS

@import "tooltip.css";

:root {
  --tt-transition:      opacity 0.2s ease-in;
  --tt-colorBackground: #111;
  --tt-colorForeground: #ddd;
  --tt-borderRadius:    0;
  --tt-opacity:         1;
}

HTML

<p>
  This is a <span class="tooltip tooltip--top tooltip--skin tooltip--skin--top" data-tooltip="This is a tooltip">sentence</span>.
</p>

Extending

You can use modifier classes to adjust properties:

.tooltip--small::before {
  font-size: 0.75rem;
}