Skip to content

Commit 4b2c986

Browse files
catccatc
committed
updated docs
1 parent cff708f commit 4b2c986

File tree

8 files changed

+253
-159
lines changed

8 files changed

+253
-159
lines changed

‎README.md

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
Simple Hint
22
===========
3-
Simple-hint is a CSS-only tooltip library packed with a variety of features.
3+
Simple-hint is a CSS-only tooltip library packed with a variety of features. Easily customizable if you want to configure any settings.
44

55
For demo and usage, see [official documentation](http://catc.github.io/simple-hint/).
66

@@ -12,7 +12,7 @@ $ bower install simple-hint
1212
```
1313

1414
## Features
15-
- positioning
15+
- positioning + alignment
1616
- opacity fade in
1717
- animation
1818
- delay visibility on hover
@@ -21,13 +21,13 @@ $ bower install simple-hint
2121
- various colors
2222
- disable on mobile
2323

24-
## Browser support
24+
### Browser support
2525
- Chrome, Firefox, Safari, Opera
2626
- IE 9+ for basic usage
2727
- IE 10+ for transitions & animations
2828

29-
### Features to come
30-
None at the moment - if you have any suggestions or requests, open a ticket or feel free to send me an email.
29+
## Customizing styles
30+
Customing tooltips to your specific needs is easy. Just open the raw sass file - `src/simple-hint.scss`, change any sass variables, run `npm run build` and your updated css will be in `dist/`.
3131

3232
## License
3333
Simple-hint is licensed under the MIT license (http://opensource.org/licenses/MIT).

‎dist/simple-hint.css

Lines changed: 86 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,33 @@
11
/*! Simple Hint v2.1.0 | Copyright (c) 2014 Catalin Covic | https://github.com/catc */
2+
/*
3+
=========================
4+
CHANGE ANY VARIABLES HERE
5+
=========================
6+
*/
7+
/*
8+
=========================
9+
*/
10+
[data-hint]:after {
11+
content: attr(data-hint);
12+
text-align: center;
13+
white-space: nowrap;
14+
z-index: 9999;
15+
/*
16+
============================
17+
CHANGE ANY TOOLTIP CSS HERE
18+
============================
19+
*/
20+
background: #292929;
21+
padding: 3px 7px;
22+
border-radius: 2px;
23+
color: white;
24+
font-weight: 400;
25+
font-size: 1.2rem;
26+
line-height: 2em;
27+
/*
28+
============================
29+
*/ }
30+
231
[data-hint]:after, [data-hint]:before {
332
display: inline-block;
433
pointer-events: none;
@@ -13,54 +42,45 @@
1342
border: 5px solid transparent;
1443
z-index: 9998; }
1544

16-
[data-hint]:after {
17-
content: attr(data-hint);
18-
text-align: center;
19-
padding: 3px 7px;
20-
border-radius: 2px;
21-
z-index: 9999;
22-
color: white;
23-
font-weight: 400;
24-
white-space: nowrap;
25-
font-size: 1.2rem;
26-
line-height: 2em;
27-
background: #292929; }
28-
29-
[class*="hint-bottom"]:before, [class*="hint-top"]:before {
30-
right: 50%;
31-
margin-right: -5px; }
32-
33-
[class*="hint-bottom"]:after, [class*="hint-top"]:after {
34-
left: 50%;
35-
-webkit-transform: translateX(-50%);
36-
-ms-transform: translateX(-50%);
37-
transform: translateX(-50%); }
38-
3945
[class*="hint-bottom"]:before {
4046
border-bottom-color: #292929;
41-
top: 100%; }
47+
top: 100%;
48+
margin-top: 0px; }
4249

4350
[class*="hint-bottom"]:after {
4451
margin-top: 10px;
4552
top: 100%; }
4653

4754
[class*="hint-top"]:before {
4855
border-top-color: #292929;
49-
bottom: 100%; }
56+
bottom: 100%;
57+
margin-bottom: 0px; }
5058

5159
[class*="hint-top"]:after {
5260
bottom: 100%;
5361
margin-bottom: 10px; }
5462

55-
[class*="hint-left"]:before, [class*="hint-right"]:before {
56-
top: 50%;
57-
margin-top: -5px; }
63+
[class*="hint-bottom-middle"]:before, [class*="hint-top-middle"]:before {
64+
right: 50%;
65+
margin-right: -5px; }
5866

59-
[class*="hint-left"]:after, [class*="hint-right"]:after {
60-
top: 50%;
61-
-webkit-transform: translateY(-50%);
62-
-ms-transform: translateY(-50%);
63-
transform: translateY(-50%); }
67+
[class*="hint-bottom-middle"]:after, [class*="hint-top-middle"]:after {
68+
left: 50%;
69+
-webkit-transform: translateX(-50%);
70+
-ms-transform: translateX(-50%);
71+
transform: translateX(-50%); }
72+
73+
[class*="hint-bottom-left"]:before, [class*="hint-top-left"]:before {
74+
left: 15px; }
75+
76+
[class*="hint-bottom-left"]:after, [class*="hint-top-left"]:after {
77+
left: 0; }
78+
79+
[class*="hint-bottom-right"]:before, [class*="hint-top-right"]:before {
80+
right: 15px; }
81+
82+
[class*="hint-bottom-right"]:after, [class*="hint-top-right"]:after {
83+
right: 0; }
6484

6585
[class*="hint-left"]:before {
6686
border-left-color: #292929;
@@ -80,6 +100,28 @@
80100
left: 100%;
81101
margin-left: 10px; }
82102

103+
[class*="hint-left-middle"]:before, [class*="hint-right-middle"]:before {
104+
top: 50%;
105+
margin-top: -5px; }
106+
107+
[class*="hint-left-middle"]:after, [class*="hint-right-middle"]:after {
108+
top: 50%;
109+
-webkit-transform: translateY(-50%);
110+
-ms-transform: translateY(-50%);
111+
transform: translateY(-50%); }
112+
113+
[class*="hint-left-top"]:before, [class*="hint-right-top"]:before {
114+
top: 15px; }
115+
116+
[class*="hint-left-top"]:after, [class*="hint-right-top"]:after {
117+
top: 0; }
118+
119+
[class*="hint-left-bottom"]:before, [class*="hint-right-bottom"]:before {
120+
bottom: 15px; }
121+
122+
[class*="hint-left-bottom"]:after, [class*="hint-right-bottom"]:after {
123+
bottom: 0; }
124+
83125
.hint-persist:before, .hint-persist:after {
84126
visibility: visible; }
85127

@@ -111,26 +153,26 @@
111153
-webkit-transition: visibility 0s 1.5s ease;
112154
transition: visibility 0s 1.5s ease; }
113155

114-
[class*="hint-fade"]:before, [class*="hint-fade"]:after {
115-
-webkit-transition: opacity 0.2s ease, visibility 0.2s ease;
116-
transition: opacity 0.2s ease, visibility 0.2s ease;
117-
opacity: 0; }
118-
119-
[class*="hint-fade"]:hover:before, [class*="hint-fade"]:hover:after {
120-
opacity: 1; }
121-
122-
[class*="hint-fade"][class*="-d-short"]:hover:before, [class*="hint-fade"][class*="-d-short"]:hover:after {
156+
[class*="hint-fade"][class*="-d-short"]:hover:before, [class*="hint-fade"][class*="-d-short"]:hover:after, [class*="hint-anim"][class*="-d-short"]:hover:before, [class*="hint-anim"][class*="-d-short"]:hover:after {
123157
-webkit-transition-delay: 0.4s;
124158
transition-delay: 0.4s; }
125159

126-
[class*="hint-fade"][class*="-d-med"]:hover:before, [class*="hint-fade"][class*="-d-med"]:hover:after {
160+
[class*="hint-fade"][class*="-d-med"]:hover:before, [class*="hint-fade"][class*="-d-med"]:hover:after, [class*="hint-anim"][class*="-d-med"]:hover:before, [class*="hint-anim"][class*="-d-med"]:hover:after {
127161
-webkit-transition-delay: 1s;
128162
transition-delay: 1s; }
129163

130-
[class*="hint-fade"][class*="-d-long"]:hover:before, [class*="hint-fade"][class*="-d-long"]:hover:after {
164+
[class*="hint-fade"][class*="-d-long"]:hover:before, [class*="hint-fade"][class*="-d-long"]:hover:after, [class*="hint-anim"][class*="-d-long"]:hover:before, [class*="hint-anim"][class*="-d-long"]:hover:after {
131165
-webkit-transition-delay: 1.5s;
132166
transition-delay: 1.5s; }
133167

168+
[class*="hint-fade"]:before, [class*="hint-fade"]:after {
169+
-webkit-transition: opacity 0.2s ease-out, visibility 0.2s ease-out;
170+
transition: opacity 0.2s ease-out, visibility 0.2s ease-out;
171+
opacity: 0; }
172+
173+
[class*="hint-fade"]:hover:before, [class*="hint-fade"]:hover:after {
174+
opacity: 1; }
175+
134176
[class*="hint-anim"][class*="hint-top"]:after, [class*="hint-anim"][class*="hint-top"]:before {
135177
bottom: 125%;
136178
opacity: 0;
@@ -175,18 +217,6 @@
175217
margin-left: -10px;
176218
opacity: 1; }
177219

178-
[class*="hint-anim"][class*="-d-short"]:hover:before, [class*="hint-anim"][class*="-d-short"]:hover:after {
179-
-webkit-transition-delay: 0.4s;
180-
transition-delay: 0.4s; }
181-
182-
[class*="hint-anim"][class*="-d-med"]:hover:before, [class*="hint-anim"][class*="-d-med"]:hover:after {
183-
-webkit-transition-delay: 1s;
184-
transition-delay: 1s; }
185-
186-
[class*="hint-anim"][class*="-d-long"]:hover:before, [class*="hint-anim"][class*="-d-long"]:hover:after {
187-
-webkit-transition-delay: 1.5s;
188-
transition-delay: 1.5s; }
189-
190220
[class*="hint-"][class*="-t-info"][class*="hint-bottom"]:before {
191221
border-bottom-color: #44C2F9; }
192222

0 commit comments

Comments
 (0)