Skip to content

Commit 1508fc3

Browse files
thoughtlessmindthoughtlessmind
committed
First basic version
- basic version with position and theme customization props
1 parent b75fdc6 commit 1508fc3

File tree

5 files changed

+253
-1
lines changed

5 files changed

+253
-1
lines changed

‎.github/workflows/npm-publish.yml‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
2+
# For more information see: https://help.github.com/actions/language-and-framework-guides/publishing-nodejs-packages
3+
4+
name: Node.js Package
5+
6+
on:
7+
release:
8+
types: [created]
9+
10+
jobs:
11+
build:
12+
runs-on: ubuntu-latest
13+
steps:
14+
- uses: actions/checkout@v2
15+
- uses: actions/setup-node@v1
16+
with:
17+
node-version: 12
18+
- name: Auto Minify
19+
uses: nizarmah/auto-minify@master
20+
with:
21+
maxdepth: 1
22+
output: 'dist'
23+
- name: Auto committing minified files
24+
uses: stefanzweifel/git-auto-commit-action@v4
25+
with:
26+
commit_message: "Github Action: Auto minified CSS files"
27+
branch: main
28+
tagging_message: 'auto minified'
29+
30+
publish-npm:
31+
needs: build
32+
runs-on: ubuntu-latest
33+
steps:
34+
- uses: actions/checkout@v2
35+
- uses: actions/setup-node@v1
36+
with:
37+
node-version: 12
38+
registry-url: https://registry.npmjs.org/
39+
- run: npm publish
40+
env:
41+
NODE_AUTH_TOKEN: ${{secrets.NPM_AUTH_TOKEN}}

‎README.md‎

Lines changed: 79 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,79 @@
1-
# css-only-tooltip
1+
# css-only-tooltip
2+
A very lightweight tooltip utitlity library, made using only `CSS`.
3+
4+
## Insatallation
5+
- Using npm
6+
`$ npm install css-only-tooltip`
7+
8+
- Using yarn
9+
`$ yarn add css-only-tooltip`
10+
11+
- Using jsDelivr CDN
12+
```js
13+
<script src="https://cdn.jsdelivr.net/npm/css-only-tooltip@latest/dist/styles.min.css"></script>
14+
```
15+
16+
17+
- Using unpkg CDN:
18+
```js
19+
<script src="https://unpkg.com/css-only-tooltip@latest/dist/styles.min.css"></script>
20+
```
21+
22+
## Quick start
23+
`css-only-tooltip` uses only `data` html attribute for working. So, the only step is to import the `CSS` in your file and use it.
24+
25+
#### When using CDN:-
26+
Add the CDN link in your `HTML` file inside the `<head>` tag.
27+
And then pass the tooltip text in format:
28+
```html
29+
<!DOCTYPE html>
30+
<head>
31+
<!-- Add the CDN link -->
32+
<link rel="stylesheet" href="https://unpkg.com/css-only-tooltip@0.0.12/dist/styles.min.css">
33+
</head>
34+
35+
<body>
36+
<div class="container">
37+
<p data-css-only-tooltip="Tooltip 1">Text</p>
38+
</div>
39+
</body>
40+
</html>
41+
```
42+
43+
## Customization
44+
There are customization options provided.
45+
Provide the customization options in a space seperated string in the data attribute like this:-
46+
``` html
47+
<p data-css-only-props="customization options">
48+
```
49+
50+
### Options:
51+
Thre are some optional customization options are available.
52+
- #### Positions:
53+
There are four positions provided. `Bottom` is default option.
54+
- `top`
55+
- `right`
56+
- `bottom`
57+
- `left`
58+
59+
- #### Themes:
60+
There are two theme options provided. `light` is default option.
61+
- `dark`
62+
- `light`
63+
---
64+
|Option| Values | default | Required |
65+
|--|--|--|--|
66+
| Position | `top`, `right`, `bottom`, `left` | `bottom` | No |
67+
|Theme|`light`, `dark`|`light`|No|
68+
---
69+
70+
71+
### Examples:
72+
- dark theme, right side.
73+
```html
74+
<span
75+
data-css-only-tooltip="Tooltip 2 bottom"
76+
data-css-only-tooltip-props="light bottom">
77+
Dakr tooltip on right side
78+
</span>
79+
```

‎index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
console.log('css-only-tooltip is running...')

‎package.json‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
{
2+
"name": "css-only-tooltip",
3+
"version": "1.0.0",
4+
"description": "",
5+
"main": "index.js",
6+
"scripts": {
7+
"test": "echo \"Error: no test specified\" && exit 1"
8+
},
9+
"repository": {
10+
"type": "git",
11+
"url": "git+https://github.com/thoughtlessmind/css-only-tooltip.git"
12+
},
13+
"keywords": ["css", "tooltip", "css-tooltip"],
14+
"author": {
15+
"name": "Rajiv",
16+
"url": "https://github.com/thoughtlessmind"
17+
},
18+
"license": "MIT",
19+
"bugs": {
20+
"url": "https://github.com/thoughtlessmind/css-only-tooltip/issues"
21+
},
22+
"homepage": "https://github.com/thoughtlessmind/css-only-tooltip#readme"
23+
}

‎styles.css‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
2+
[data-css-only-tooltip] {
3+
cursor: pointer;
4+
position: relative;
5+
}
6+
7+
[data-css-only-tooltip]::after {
8+
background-color: #fff;
9+
font-family: "Roboto", sans-serif;
10+
font-weight: normal;
11+
color: #222;
12+
font-size: 14px;
13+
padding: 8px 12px;
14+
height: fit-content;
15+
width: fit-content;
16+
white-space: nowrap;
17+
border-radius: 6px;
18+
position: absolute;
19+
text-align: center;
20+
bottom: 0px;
21+
left: 50%;
22+
content: attr(data-css-only-tooltip);
23+
transform: translate(-50%, 110%) scale(0);
24+
transform-origin: top;
25+
transition: transform 0.14s;
26+
box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.05);
27+
z-index: 200;
28+
}
29+
30+
[data-css-only-tooltip]:hover:after {
31+
display: block;
32+
transform: translate(-50%, 110%) scale(1);
33+
}
34+
35+
36+
/* -------------------------------------------------------------- */
37+
/* ----------------------- THEMES ----------------------------- */
38+
39+
/* ----- Dark -----*/
40+
[data-css-only-tooltip-props~="dark"]::after {
41+
background-color: #222;
42+
color: #fff;
43+
}
44+
45+
/* ----- Light -----*/
46+
[data-css-only-tooltip-props~="dark"]::after {
47+
background-color: #fff;
48+
color: #222;
49+
}
50+
51+
52+
/* -------------------------------------------------------------- */
53+
/* ----------------------- POSITIONS ----------------------------- */
54+
55+
/* ----- Right -----*/
56+
[data-css-only-tooltip-props~="right"]::after {
57+
transform: translate(0%, 30%) scale(0);
58+
right: 0%;
59+
left: 100%;
60+
transform-origin: left;
61+
}
62+
63+
[data-css-only-tooltip-props~="right"]:hover:after {
64+
transform: translate(10%, 30%) scale(1);
65+
}
66+
67+
/* ----- Left ------*/
68+
[data-css-only-tooltip-props~="left"]::after {
69+
transform: translate(-100%, 30%) scale(0);
70+
transform-origin: right;
71+
right: 0;
72+
left: 0;
73+
}
74+
75+
[data-css-only-tooltip-props~="left"]:hover:after {
76+
transform: translate(-110%, 30%) scale(1);
77+
transform-origin: right;
78+
}
79+
80+
/* ----- Top -----*/
81+
[data-css-only-tooltip-props~="top"]::after {
82+
transform: translate(-50%, -100%) scale(0);
83+
transform-origin: bottom;
84+
right: 50%;
85+
left: 50%;
86+
top: 0
87+
}
88+
89+
[data-css-only-tooltip-props~="top"]:hover:after {
90+
transform: translate(-50%, -120%) scale(1);
91+
/* transform-origin: bottom; */
92+
}
93+
94+
/* ----- Bottom -----*/
95+
[data-css-only-tooltip-props~="bottom"]::after {
96+
transform: translate(-50%, 110%) scale(0);
97+
transform-origin: top;
98+
right: 50%;
99+
left: 50%;
100+
bottom:0;
101+
top:unset;
102+
}
103+
104+
[data-css-only-tooltip-props~="bottom"]:hover:after {
105+
transform: translate(-50%, 120%) scale(1);
106+
/* transform-origin: bottom; */
107+
}
108+
109+

0 commit comments

Comments
 (0)