Skip to content

alterebro/css-tooltip

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
12 branches 6 tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
.github
 
 
dist
 
 
docs
 
 
src
 
 
.gitignore
 
 
gulpfile.js
 
 
package-lock.json
 
 
package.json
 
 
readme.md
 
 
💬 css-tooltip Install Usage Styles Example: Customize Development License

readme.md


💬 css-tooltip npm

Only CSS lightweight, minimal and simple tooltips

Install

$ npm i css-tooltip

You can download it here or include the css file directly from unpkg.com:

<link rel="stylesheet" src="https://unpkg.com/css-tooltip" />

Usage

Include the css-tooltip minified stylesheet file on the head of your document.

<head>
    ...
    <link rel="stylesheet" href="/path/to/css-tooltip.min.css" />
</head>

Add the data-tooltip attribute to the element you want the tooltip in. The value of that attribute will be the text shown by the tooltip

<a href="#" data-tooltip="Lorem ipsum dolor sit amet...">tooltip</a>

Styles

There are some available classes to apply different styling to the tooltip

  • tooltip-multiline : Creates a multiline tooltip

Positioning :

  • tooltip-bottom : Places the tooltip at the bottom (centered)
  • tooltip-bottom-right : Places the tooltip at the bottom right.
  • tooltip-bottom-left : Places the tooltip at the bottom left.
  • tooltip-top-right : Places the tooltip at the top right.
  • tooltip-top-left : Places the tooltip at the top left.

There's no tooltip-top class as it is the default styling for the tooltip

Example:

You just need to add the class with the style you want to apply, for example, a multiline tooltip located on the bottom left would have the class tooltip-multiline tooltip-bottom-left :

<a href="#" class="tooltip-multiline tooltip-bottom-left" data-tooltip="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla a venenatis massa.">tootltip</a>

The following page has got some examples using the different styles : alterebro.github.io/css-tooltip/

Customize

You can customize the output of the tooltip by tweaking the source file variables src/css-tooltip.scss.

// Self explanatory names

$background-color   : #333;
$foreground-color   : #eee;
$arrow-size         : 8px;
$vertical-shift     : 12px;
$multiline-width    : 240px;
$tooltip-padding    : 8px 12px;
$roundness          : 3px; // 0 || border-radius
$shadow             : 0 5px 15px -5px rgba(0, 0, 0, .65); // 0 || box-shadow
$load-styles        : true !default; // false to remove the extra styles.

Then you'll have to build the CSS file:

Development

# Install dependencies
$ npm install

# Edit as your wish the main file ./src/css-tooltip.scss
$ npm run watch  # to see changes while editing the file
$ npm run build  # to create the distributable files

License

ISC © Jorge Moreno — @alterebro

About

💬 Only CSS lightweight, minimal and simple tooltips. No dependencies, no javascript, no rubbish, just around ~500 Bytes gzipped

alterebro.github.io/css-tooltip/

Topics

css tooltips lightweight minimal simple tooltip css-tooltip

Resources

Readme
Activity

Stars

41 stars

Watchers

2 watching

Forks

3 forks
Report repository

Sponsor this project

Contributors 2

  •  
  •  

Languages