├── .gitignore ├── .github └── FUNDING.yml ├── docs ├── favicon.ico ├── css-tooltip.png ├── style.css └── index.html ├── gulpfile.js ├── package.json ├── dist ├── css-tooltip.min.css └── css-tooltip.css ├── readme.md └── src └── css-tooltip.scss /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | .DS_Store 3 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | github: alterebro 2 | ko_fi: alterebro 3 | buy_me_a_coffee: alterebro 4 | -------------------------------------------------------------------------------- /docs/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alterebro/css-tooltip/HEAD/docs/favicon.ico -------------------------------------------------------------------------------- /docs/css-tooltip.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alterebro/css-tooltip/HEAD/docs/css-tooltip.png -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | // const gulp = require('gulp'); 2 | const { src, dest, parallel, watch } = require('gulp'); 3 | const sass = require('gulp-sass'); 4 | const rename = require('gulp-rename'); 5 | const postcss = require('gulp-postcss'); 6 | 7 | sass.compiler = require('node-sass'); 8 | 9 | function postCSS() { 10 | return src('./src/*.scss') 11 | .pipe(sass.sync({outputStyle: 'expanded'}).on('error', sass.logError)) 12 | .pipe(postcss([ 13 | require('autoprefixer'), 14 | ])) 15 | .pipe(dest('./dist')); 16 | } 17 | function postCSSmin() { 18 | return src('./src/*.scss') 19 | .pipe(sass().on('error', sass.logError)) 20 | .pipe(postcss([ 21 | require('autoprefixer'), 22 | require('cssnano') 23 | ])) 24 | .pipe(rename({ suffix: '.min' })) 25 | .pipe(dest('./dist')); 26 | } 27 | 28 | exports.build = parallel(postCSS, postCSSmin); 29 | exports.watch = function() { 30 | watch('./src/*.scss', parallel(postCSS, postCSSmin)); 31 | } 32 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "css-tooltip", 3 | "version": "0.3.4", 4 | "description": "Only CSS lightweight, minimal and simple tooltips", 5 | "main": "dist/css-tooltip.min.css", 6 | "browserslist": [ 7 | "> 1%", 8 | "last 1 version", 9 | "Firefox ESR", 10 | "not dead" 11 | ], 12 | "postcss": { 13 | "parser": "sugarss", 14 | "map": false, 15 | "plugins": { 16 | "autoprefixer": {}, 17 | "cssnano": {} 18 | } 19 | }, 20 | "scripts": { 21 | "build": "rm -rf dist && gulp build", 22 | "watch": "gulp watch", 23 | "version": "npm run build && git add -A dist/", 24 | "postversion": "git push && git push --tags && npm publish" 25 | }, 26 | "repository": { 27 | "type": "git", 28 | "url": "git+https://github.com/alterebro/css-tooltip.git" 29 | }, 30 | "keywords": [ 31 | "CSS", 32 | "tooltip", 33 | "lightweight", 34 | "minimal", 35 | "simple" 36 | ], 37 | "author": "Jorge Moreno @alterebro (moro.es)", 38 | "bugs": { 39 | "url": "https://github.com/alterebro/css-tooltip/issues" 40 | }, 41 | "homepage": "https://alterebro.github.io/css-tooltip/", 42 | "license": "ISC", 43 | "devDependencies": { 44 | "autoprefixer": "^9.8.6", 45 | "cssnano": "^4.1.10", 46 | "gulp": "^5.0.0", 47 | "gulp-postcss": "^8.0.0", 48 | "gulp-rename": "^1.4.0", 49 | "gulp-sass": "^5.1.0", 50 | "node-sass": "^9.0.0" 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /dist/css-tooltip.min.css: -------------------------------------------------------------------------------- 1 | [data-tooltip]{position:relative;display:inline-block}[data-tooltip]:after,[data-tooltip]:before{position:absolute;left:50%;transform:translate(-50%,-12px);z-index:1000;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;opacity:0;transition:opacity .35s ease .25s}[data-tooltip]:before{content:attr(data-tooltip);background:#333;color:#eee;padding:8px 12px;white-space:nowrap;bottom:100%;border-radius:3px;box-shadow:0 5px 15px -5px rgba(0,0,0,.65)}[data-tooltip]:after{content:"";background:transparent;border:8px solid transparent;border-top-color:#333}[data-tooltip]:active:after,[data-tooltip]:active:before,[data-tooltip]:focus:after,[data-tooltip]:focus:before,[data-tooltip]:hover:after,[data-tooltip]:hover:before{opacity:1}[data-tooltip].tooltip-multiline:before{width:100vw;max-width:240px;white-space:normal}[data-tooltip][class*=tooltip-bottom]:after,[data-tooltip][class*=tooltip-bottom]:before{transform:translate(-50%,12px)}[data-tooltip][class*=tooltip-bottom]:before{bottom:auto;top:100%}[data-tooltip][class*=tooltip-bottom]:after{bottom:0;border:8px solid transparent;border-bottom-color:#333}[data-tooltip].tooltip-bottom-left:before{transform:translate(-24px,12px)}[data-tooltip].tooltip-bottom-right:before{left:auto;right:50%;transform:translate(24px,12px)}[data-tooltip].tooltip-top-left:before{transform:translate(-24px,-12px)}[data-tooltip].tooltip-top-right:before{left:auto;right:50%;transform:translate(24px,-12px)} -------------------------------------------------------------------------------- /docs/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Droid Sans", "Helvetica Neue", Arial, sans-serif; 3 | font-size: .9rem; 4 | font-weight: 400; 5 | color: #444; 6 | line-height: 1.6; 7 | width: 90%; 8 | max-width: 38rem; 9 | margin: 3rem auto; 10 | } 11 | h1 { 12 | font-size: 150%; 13 | font-weight: 700; 14 | border-bottom: solid #ddd 1px; 15 | } 16 | h2 { 17 | font-size: 120%; 18 | font-weight: 500; 19 | border-bottom: solid #ddd 1px; 20 | margin-top: 2rem; 21 | } 22 | a { 23 | color: #399; 24 | font-weight: 500; 25 | text-decoration: none; 26 | } 27 | a:hover { 28 | color: #000; 29 | } 30 | img { 31 | display: block; 32 | max-width: 100%; 33 | } 34 | pre, code { 35 | font-family : "Andale Mono", "Monaco", "Lucida Console", "Menlo", "Consolas", "Roboto Mono", "Liberation Mono", monospace; 36 | background: #cff; 37 | border-radius: 3px; 38 | } 39 | pre { 40 | overflow-x: scroll; 41 | } 42 | code { 43 | padding: 3px 5px; 44 | font-size: 80%; 45 | } 46 | hr { 47 | margin: 2rem 0; 48 | background: transparent; 49 | border: none; 50 | border-bottom: solid #ddd 1px; 51 | } 52 | 53 | .examples { 54 | border: dotted #bee 2px; 55 | border-radius: 3px; 56 | padding: .5rem 2rem; 57 | } 58 | 59 | .github-corner:hover .octo-arm{ animation:octocat-wave 560ms ease-in-out} 60 | @keyframes octocat-wave{ 61 | 0%,100%{ transform:rotate(0) } 62 | 20%,60%{ transform:rotate(-25deg) } 63 | 40%,80%{ transform:rotate(10deg) } 64 | } 65 | @media (max-width:500px){ 66 | .github-corner:hover .octo-arm{ animation:none} 67 | .github-corner .octo-arm{ animation:octocat-wave 560ms ease-in-out } 68 | } 69 | 70 | 71 | [data-tooltip]{ border-bottom: solid #9ff 2px } 72 | [data-tooltip]:before { 73 | font-weight: 300; 74 | font-size: 80%; 75 | } 76 | -------------------------------------------------------------------------------- /dist/css-tooltip.css: -------------------------------------------------------------------------------- 1 | [data-tooltip] { 2 | position: relative; 3 | display: inline-block; 4 | } 5 | 6 | [data-tooltip]:before, [data-tooltip]:after { 7 | position: absolute; 8 | left: 50%; 9 | transform: translate(-50%, -12px); 10 | z-index: 1000; 11 | pointer-events: none; 12 | -webkit-user-select: none; 13 | -moz-user-select: none; 14 | -ms-user-select: none; 15 | user-select: none; 16 | opacity: 0; 17 | transition: opacity .35s ease .25s; 18 | } 19 | 20 | [data-tooltip]:before { 21 | content: attr(data-tooltip); 22 | background: #333; 23 | color: #eee; 24 | padding: 8px 12px; 25 | white-space: nowrap; 26 | bottom: 100%; 27 | border-radius: 3px; 28 | box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.65); 29 | } 30 | 31 | [data-tooltip]:after { 32 | content: ''; 33 | background: transparent; 34 | border: 8px solid transparent; 35 | border-top-color: #333; 36 | } 37 | 38 | [data-tooltip]:hover:before, [data-tooltip]:hover:after, [data-tooltip]:focus:before, [data-tooltip]:focus:after, [data-tooltip]:active:before, [data-tooltip]:active:after { 39 | opacity: 1; 40 | } 41 | 42 | [data-tooltip].tooltip-multiline:before { 43 | width: 100vw; 44 | max-width: 240px; 45 | white-space: normal; 46 | } 47 | 48 | [data-tooltip][class*="tooltip-bottom"]:before, [data-tooltip][class*="tooltip-bottom"]:after { 49 | transform: translate(-50%, 12px); 50 | } 51 | 52 | [data-tooltip][class*="tooltip-bottom"]:before { 53 | bottom: auto; 54 | top: 100%; 55 | } 56 | 57 | [data-tooltip][class*="tooltip-bottom"]:after { 58 | bottom: 0; 59 | border: 8px solid transparent; 60 | border-bottom-color: #333; 61 | } 62 | 63 | [data-tooltip].tooltip-bottom-left:before { 64 | transform: translate(-24px, 12px); 65 | } 66 | 67 | [data-tooltip].tooltip-bottom-right:before { 68 | left: auto; 69 | right: 50%; 70 | transform: translate(24px, 12px); 71 | } 72 | 73 | [data-tooltip].tooltip-top-left:before { 74 | transform: translate(-24px, -12px); 75 | } 76 | 77 | [data-tooltip].tooltip-top-right:before { 78 | left: auto; 79 | right: 50%; 80 | transform: translate(24px, -12px); 81 | } 82 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 |

2 |
3 |

4 | 5 | ------ 6 | 7 | # 💬 css-tooltip [![npm](https://img.shields.io/npm/v/css-tooltip.svg?label=&color=24292e)](https://github.com/alterebro/css-tooltip/releases/latest) 8 | 9 | > Only CSS lightweight, minimal and simple tooltips 10 | 11 | 12 | ## Install 13 | 14 | ```sh 15 | $ npm i css-tooltip 16 | ``` 17 | 18 | You can [download it here](https://github.com/alterebro/css-tooltip/archive/master.zip) or 19 | include the `css` file directly from [unpkg.com](https://unpkg.com/css-tooltip): 20 | 21 | ```html 22 | 23 | ``` 24 | 25 | ## Usage 26 | 27 | Include the `css-tooltip` minified stylesheet file on the head of your document. 28 | 29 | ```html 30 | 31 | ... 32 | 33 | 34 | ``` 35 | 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 36 | 37 | ```html 38 | tooltip 39 | ``` 40 | 41 | ## Styles 42 | 43 | There are some available classes to apply different styling to the tooltip 44 | 45 | - `tooltip-multiline` : Creates a multiline tooltip 46 | 47 | Positioning : 48 | 49 | - `tooltip-bottom` : Places the tooltip at the bottom (centered) 50 | - `tooltip-bottom-right` : Places the tooltip at the bottom right. 51 | - `tooltip-bottom-left` : Places the tooltip at the bottom left. 52 | - `tooltip-top-right` : Places the tooltip at the top right. 53 | - `tooltip-top-left` : Places the tooltip at the top left. 54 | 55 | *There's no `tooltip-top` class as it is the default styling for the tooltip* 56 | 57 | ### Example: 58 | 59 | 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` : 60 | 61 | ```html 62 | tootltip 63 | ``` 64 | 65 | The following page has got some examples using the different styles : [alterebro.github.io/css-tooltip/](https://alterebro.github.io/css-tooltip/) 66 | 67 | 68 | ## Customize 69 | 70 | You can customize the output of the tooltip by tweaking the source file variables `src/css-tooltip.scss`. 71 | 72 | ```scss 73 | // Self explanatory names 74 | 75 | $background-color : #333; 76 | $foreground-color : #eee; 77 | $arrow-size : 8px; 78 | $vertical-shift : 12px; 79 | $multiline-width : 240px; 80 | $tooltip-padding : 8px 12px; 81 | $roundness : 3px; // 0 || border-radius 82 | $shadow : 0 5px 15px -5px rgba(0, 0, 0, .65); // 0 || box-shadow 83 | $load-styles : true !default; // false to remove the extra styles. 84 | ``` 85 | 86 | Then you'll have to build the CSS file: 87 | 88 | ## Development 89 | 90 | ```sh 91 | # Install dependencies 92 | $ npm install 93 | 94 | # Edit as your wish the main file ./src/css-tooltip.scss 95 | $ npm run watch # to see changes while editing the file 96 | $ npm run build # to create the distributable files 97 | ``` 98 | 99 | ## License 100 | 101 | ISC © Jorge Moreno *— [@alterebro](https://twitter.com/alterebro)* 102 | -------------------------------------------------------------------------------- /src/css-tooltip.scss: -------------------------------------------------------------------------------- 1 | 2 | $background-color : #333; 3 | $foreground-color : #eee; 4 | $arrow-size : 8px; 5 | $vertical-shift : 12px; 6 | $multiline-width : 240px; 7 | $tooltip-padding : 8px 12px; 8 | $roundness : 3px; // 0 || border-radius 9 | $shadow : 0 5px 15px -5px rgba(0, 0, 0, .65); // 0 || box-shadow 10 | $load-styles : true !default; // Extra styles needed? 11 | 12 | [data-tooltip] { 13 | 14 | position: relative; 15 | display: inline-block; 16 | 17 | &:before, &:after { 18 | position: absolute; 19 | left: 50%; 20 | transform: translate(-50%, -$vertical-shift); 21 | z-index: 1000; 22 | pointer-events: none; 23 | user-select: none; 24 | opacity: 0; 25 | transition: opacity .35s ease .25s; 26 | } 27 | 28 | // Tooltip Body 29 | &:before { 30 | content: attr(data-tooltip); 31 | background: $background-color; 32 | color: $foreground-color; 33 | padding: $tooltip-padding; 34 | white-space: nowrap; 35 | bottom: 100%; 36 | @if ($roundness != 0) { border-radius: $roundness; } 37 | @if ($shadow != 0) { box-shadow: $shadow; } 38 | } 39 | 40 | // Tooltip Arrow 41 | &:after { 42 | content: ''; 43 | background: transparent; 44 | border: $arrow-size solid transparent; 45 | border-top-color: $background-color; 46 | } 47 | 48 | // Active state 49 | &:hover, &:focus, &:active { 50 | &:before, &:after { 51 | opacity: 1 52 | } 53 | } 54 | 55 | @if $load-styles == true { 56 | // ---------------------------------------------------- 57 | // Extra Styles : 58 | // Multi-line tooltip (.tooltip-multiline) 59 | &.tooltip-multiline { 60 | &:before { 61 | width: 100vw; 62 | max-width: $multiline-width; 63 | white-space: normal; 64 | } 65 | } 66 | 67 | // ---------- 68 | // Bottom tooltip (.tooltip-bottom, *-left, *-right ) 69 | &[class*="tooltip-bottom"] { 70 | &:before, &:after { transform: translate(-50%, $vertical-shift) } 71 | &:before { 72 | bottom: auto; 73 | top: 100%; 74 | } 75 | &:after { 76 | bottom: 0; 77 | border: $arrow-size solid transparent; 78 | border-bottom-color: $background-color; 79 | } 80 | } 81 | &.tooltip-bottom-left:before { 82 | transform: translate(-($arrow-size*3), $vertical-shift); 83 | } 84 | &.tooltip-bottom-right:before { 85 | left: auto; 86 | right: 50%; 87 | transform: translate($arrow-size*3, $vertical-shift); 88 | } 89 | 90 | // ---------- 91 | // Top tooltip (.tooltip-top, *-left, *-right ) 92 | // .tooltip-top not needed (default style) 93 | &.tooltip-top-left:before { 94 | transform: translate(-($arrow-size*3), -$vertical-shift); 95 | } 96 | &.tooltip-top-right:before { 97 | left: auto; 98 | right: 50%; 99 | transform: translate( $arrow-size*3, -$vertical-shift); 100 | } 101 | // End extra styles 102 | // ---------------------------------------------------- 103 | } 104 | 105 | } 106 | -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CSS Tooltip 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |

CSS tooltip

17 | 18 |

💬 CSS Tooltip

19 |

Only CSS lightweight, minimal and simple tooltips 💬

20 |
21 | 22 |
23 |

Usage

24 |

25 | Install the package via npm (npm i css-tooltip) or directly you can include it from unpkg.com. 26 | Just include a link tag to the tooltip css file on the head of your document: 27 |

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

30 | Add the data-tooltip attribute to the element you want the tooltip in: 31 |

32 | 
<span data-tooltip="Tooltip text">tooltip</span>
33 | 34 |

35 | You can also use different classes to style the tooltip with different positioning: 36 | .tooltip-multiline, .tooltip-bottom, .tooltip-bottom-right, .tooltip-bottom-left, .tooltip-top-right, .tooltip-top-left 37 |

38 | 39 |

Examples

40 | 41 |
42 |

💬 Using tooltips on different elements, span with a tooltip here, but not here.

43 |
44 |

Hyperlinks with tooltip: standard style tooltip (data-tooltip="Lorem ipsum dolor sit amet...").

45 |
46 |

47 | 💬 a multiline tootltip multiline placed at the bottom (class="tooltip-multiline tooltip-bottom") 48 | / another element with tootltip on the bottom-right (class="tooltip-bottom-right") 49 | and
another one more (placed on bottom-left) (class="tooltip-bottom-left"). 50 |

51 | 55 |
56 | 57 |

More Info

58 | 63 |
64 | 65 | 77 | 78 | 79 | 80 | 81 | 82 | --------------------------------------------------------------------------------