├── LICENSE ├── README.md ├── css └── tooltip.css ├── scss ├── _mixin.scss └── tooltip.scss └── tooltip.gif /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Elnatan Nitzan 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Tooltip UI 2 | Pure CSS/SCSS Tooltip Library. easy to use, clean design & No need for JS at all! 3 | ### Demo 4 | 5 | ![](/tooltip.gif) 6 | 7 | 8 | ### Installation 9 | 10 | **Manually:** 11 | 12 | Download `tooltip.css` from this repo and add it to your code. e.g. 13 | 14 | ```html 15 | 16 | ``` 17 | 18 | Define a tooltip data-text to your element and let the style. 19 | in the data-text content Write what you want to appear in the Tooltip. 20 | in the span area Write some text When you go hove on it with the cursor, the Tooltip will show. 21 | 22 | To change different text and background color to Tooltip you can simply set as follows: 23 | ```css 24 | [data-text][data-text-top]::before { 25 | background: ...; 26 | color: ...; 27 | } 28 | ``` 29 | 30 | ```html 31 |
...
32 | ``` 33 | 34 | ### Tooltip data-text specific style: 35 | ```html 36 | Top Center: 37 |
...
38 | 39 | Top Right: 40 |
...
41 | 42 | Top Left: 43 |
...
44 | 45 | Bottom Center: 46 |
...
47 | 48 | Bottom Right: 49 |
...
50 | 51 | Bottom Left: 52 |
...
53 | 54 | Right Center: 55 |
...
56 | 57 | Right Top: 58 |
...
59 | 60 | Right Bottom: 61 |
...
62 | 63 | Left Center: 64 |
...
65 | 66 | Left Top: 67 |
...
68 | 69 | Left Bottom: 70 |
...
71 | 72 | ``` 73 | 74 | ### Credit 75 | 76 | Made with love by [Elnatan Nitzan](https://linkpad.bio/elnatanitzan) 77 | -------------------------------------------------------------------------------- /css/tooltip.css: -------------------------------------------------------------------------------- 1 | *[data-text] { 2 | position: relative; 3 | } 4 | *[data-text]::before { 5 | content: attr(data-text); 6 | font-size: 0.9rem; 7 | max-width: 85%; 8 | color: #f4f3ee; 9 | padding: 7px 10px; 10 | border-radius: 4px; 11 | position: absolute; 12 | transform: translate(-50%, -50%) scale(0); 13 | transition: visibility 400ms, opacity 400ms, transform 400ms; 14 | visibility: hidden; 15 | opacity: 0; 16 | pointer-events: none; 17 | } 18 | *[data-text]:hover::before { 19 | visibility: visible; 20 | opacity: 1; 21 | transform: translate(-50%, -50%) scale(1); 22 | } 23 | *[data-text][data-text-top]::before { 24 | transform-origin: center bottom; 25 | top: -60%; 26 | left: 50%; 27 | background: black; 28 | } 29 | *[data-text][data-text-top=right]::before { 30 | transform-origin: right bottom; 31 | top: -60%; 32 | left: 75%; 33 | background: #ffd166; 34 | } 35 | *[data-text][data-text-top=left]::before { 36 | transform-origin: left bottom; 37 | top: -60%; 38 | left: 25%; 39 | background: #06d6a0; 40 | } 41 | *[data-text][data-text-bottom]::before { 42 | transform-origin: center top; 43 | top: 170%; 44 | left: 50%; 45 | background: #118ab2; 46 | } 47 | *[data-text][data-text-bottom=right]::before { 48 | transform-origin: right top; 49 | top: 170%; 50 | left: 80%; 51 | background: #073b4c; 52 | } 53 | *[data-text][data-text-bottom=left]::before { 54 | transform-origin: right top; 55 | top: 170%; 56 | left: 20%; 57 | background: #606c38; 58 | } 59 | *[data-text][data-text-right]::before { 60 | transform-origin: center left; 61 | top: 50%; 62 | left: 130%; 63 | background: #283618; 64 | } 65 | *[data-text][data-text-right=top]::before { 66 | transform-origin: top left; 67 | top: 50%; 68 | left: 130%; 69 | background: #bc6c25; 70 | } 71 | *[data-text][data-text-right=bottom]::before { 72 | transform-origin: bottom left; 73 | top: 50%; 74 | left: 130%; 75 | background: #7209b7; 76 | } 77 | *[data-text][data-text-left]::before { 78 | transform-origin: center right; 79 | top: 50%; 80 | left: -35%; 81 | background: #8a817c; 82 | } 83 | *[data-text][data-text-left=top]::before { 84 | transform-origin: top right; 85 | top: 50%; 86 | left: -35%; 87 | background: #00509d; 88 | } 89 | *[data-text][data-text-left=bottom]::before { 90 | transform-origin: bottom right; 91 | top: 50%; 92 | left: -35%; 93 | background: #e71d36; 94 | } -------------------------------------------------------------------------------- /scss/_mixin.scss: -------------------------------------------------------------------------------- 1 | @mixin tooltip($trans-orX, $trans-orY, $top, $left, $background) { 2 | &::before { 3 | transform-origin: $trans-orX $trans-orY; 4 | top: $top; 5 | left: $left; 6 | background: $background; 7 | } 8 | } -------------------------------------------------------------------------------- /scss/tooltip.scss: -------------------------------------------------------------------------------- 1 | *[data-text] { 2 | position: relative; 3 | 4 | &::before { 5 | content: attr(data-text); 6 | font-size: .9rem; 7 | max-width: 85%; 8 | color: $light; 9 | padding: 7px 10px; 10 | border-radius: 4px; 11 | position: absolute; 12 | transform: translate(-50%, -50%) scale(0); 13 | transition: 14 | visibility 400ms, 15 | opacity 400ms, 16 | transform 400ms; 17 | visibility: hidden; 18 | opacity: 0; 19 | pointer-events: none; 20 | } 21 | &:hover { 22 | &::before { 23 | visibility: visible; 24 | opacity: 1; 25 | transform: translate(-50%, -50%) scale(1); 26 | } 27 | } 28 | 29 | &[data-text-top] { 30 | @include tooltip(center, bottom, -60%, 50%, black); 31 | } 32 | 33 | &[data-text-top="right"] { 34 | @include tooltip(right, bottom, -60%, 75%, #ffd166); 35 | } 36 | 37 | &[data-text-top="left"] { 38 | @include tooltip(left, bottom, -60%, 25%, #06d6a0); 39 | } 40 | 41 | &[data-text-bottom] { 42 | @include tooltip(center, top, 170%, 50%, #118ab2); 43 | } 44 | 45 | &[data-text-bottom="right"] { 46 | @include tooltip(right, top, 170%, 80%, #073b4c); 47 | } 48 | 49 | &[data-text-bottom="left"] { 50 | @include tooltip(right, top, 170%, 20%, #606c38); 51 | } 52 | &[data-text-right] { 53 | @include tooltip(center, left, 50%, 130%, #283618); 54 | } 55 | 56 | &[data-text-right="top"] { 57 | @include tooltip(top, left, 50%, 130%, #bc6c25); 58 | } 59 | 60 | &[data-text-right="bottom"] { 61 | @include tooltip(bottom, left, 50%, 130%, #7209b7); 62 | } 63 | 64 | &[data-text-left] { 65 | @include tooltip(center, right, 50%, -35%, #8a817c); 66 | } 67 | 68 | &[data-text-left="top"] { 69 | @include tooltip(top, right, 50%, -35%, #00509d); 70 | } 71 | 72 | &[data-text-left="bottom"] { 73 | @include tooltip(bottom, right, 50%, -35%, #e71d36); 74 | } 75 | } -------------------------------------------------------------------------------- /tooltip.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elnatanitzan/tooltip-ui/d569252fa824ba61d74e218153077346d63b9320/tooltip.gif --------------------------------------------------------------------------------