https://github.com/eonu/tooltip
Pure SCSS pseudo-element tool-tip configured with custom HTML attributes.
https://github.com/eonu/tooltip
Last synced: 12 months ago
JSON representation
Pure SCSS pseudo-element tool-tip configured with custom HTML attributes.
- Host: GitHub
- URL: https://github.com/eonu/tooltip
- Owner: eonu
- Created: 2019-02-05T12:01:20.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2020-09-30T18:46:26.000Z (over 5 years ago)
- Last Synced: 2025-04-03T12:22:58.598Z (about 1 year ago)
- Language: CSS
- Homepage:
- Size: 1.95 KB
- Stars: 0
- Watchers: 0
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Tooltip
Pure SCSS hover-activated tool-tip configured with custom HTML attributes.
**Implementation**: [View article on Medium](https://medium.freecodecamp.org/a-step-by-step-guide-to-making-pure-css-tooltips-3d5a3e237346)
## Features
- Two new HTML attributes that define a tool-tip and its position:
- `tooltip` - The text content of the tool-tip pseudo-element
- `tooltip-position` - The position of the tooltip (relative to current element)
**Examples**:
```html
Button
Button
Button
Button
```
- An SCSS map for some basic tool-tip styling customization:
```scss
$tooltip: (
padding: 4px 2px,
min-width: 80px,
font-size: 12px,
border-width: 4px 6px 0 6px,
border-style: solid,
border-color: rgba(0,0,0,0.7) transparent transparent transparent,
border-radius: 3px,
background-color: rgba(0,0,0,0.7),
color: white,
);
```
**Note**: New CSS attributes for the tool-tip cannot be added to this map.