Simple tooltip using an html attribute for the content
CSS
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
test
.editorconfig
.gitignore
CHANGELOG.md
LICENSE
README.md
index.css
package.json

README.md

Tooltip

Simple tooltip using an html attribute for the content

Install

$ npm install cssrecipes-tooltip

Usage

Example:

<span class="r-Tooltip r-Tooltip--bottom" data-r-tooltip="I'm the tooltip body">Hover me to see the tooltip !</span>

Available classes

.r-Tooltip

Position modifiers

.r-Tooltip--top
.r-Tooltip--bottom
.r-Tooltip--left
.r-Tooltip--right

Visibility modifier

.r-Tooltip--visible

Force visibility (no need to hover).

.r-Tooltip--nowrap

Add a avoid whitespace to wrap content (force content to be on one line).

.r-Tooltip--centerText

Add text-align: center on the tooltip content.

Availables custom properties

:root {
	--r-Tooltip-zIndex: 1000;
	--r-Tooltip-backgroundColor: #383838;
	--r-Tooltip-margin: .5rem;

	--r-Tooltip-arrow-size: .5rem;
}

Customize

If custom properties are not enough, you can obviously override default rules. Or add modifier(s).

Adding a state

It's easy to add a success or error state.

.r-Tooltip--STATE::before {
	background-color: var(--r-Tooltip--STATE-color);
	text-shadow: 0 -1px 0 color(var(--r-Tooltip--STATE-color) blackness(90%));
}
	.r-Tooltip--STATE.r-Tooltip--top::after { border-top-color: var(--r-Tooltip--STATE-color) }
	.r-Tooltip--STATE.r-Tooltip--bottom::after { border-bottom-color: var(--r-Tooltip--STATE-color) }
	.r-Tooltip--STATE.r-Tooltip--left::after { border-left-color: var(--r-Tooltip--STATE-color) }
	.r-Tooltip--STATE.r-Tooltip--right::after { border-right-color: var(--r-Tooltip--STATE-color) }

Testing

To generate a build:

$ npm run build

To generate the testing build.

$ npm run build-test

Basic visual tests are in test/index.html.

Contributing

Work on a branch, install dev-dependencies, respect coding style & run tests before submitting a bug fix or a feature.

$ git clone https://github.com/cssrecipes/tooltip.git
$ git checkout -b patch-1
$ npm install
$ npm test

Changelog

License