1
- ## Tooltip
1
+ ## CSS UI - Tooltip
2
2
3
3
Simple tooltip.
4
4
@@ -22,7 +22,7 @@ CSS dependencies.
22
22
<link rel =" stylesheet" href =" path/to/cssui.css" >
23
23
```
24
24
25
- CSS tooltip style .
25
+ CSS tooltip.
26
26
27
27
``` html
28
28
<link rel =" stylesheet" href =" path/to/style.tooltip.css" >
@@ -34,48 +34,21 @@ CSS tooltip theme.
34
34
<link rel =" stylesheet" href =" path/to/style.tooltip.theme.css" >
35
35
```
36
36
37
- Set font .
37
+ Use Open Sans fotns .
38
38
39
- ``` html
40
- <style >
41
- body {
42
- font-family : ' Open Sans' , sans-serif ;
43
- }
44
- </style >
39
+ ``` css
40
+ font-family : 'Open Sans', sans-serif ;
45
41
```
46
42
47
- Simple tooltip html.
43
+ Tooltip html .
44
+
45
+ Class: ```primary```, ```common```, ```success```, ```warning``` and ```danger```
48
46
49
47
```html
50
- <!-- primary color -->
51
48
<span class="tooltip"> Top <span class="primary top"> Top</span > </span >
52
49
<span class="tooltip"> Bottom <span class="primary bottom"> Bottom</span > </span >
53
50
<span class="tooltip"> Left <span class="primary left"> Left</span > </span >
54
51
<span class="tooltip"> Right <span class="primary right"> Right</span > </span >
55
-
56
- <!-- common color -->
57
- <span class =" tooltip" >Top <span class =" common top" >Top</span ></span >
58
- <span class =" tooltip" >Bottom <span class =" common bottom" >Bottom</span ></span >
59
- <span class =" tooltip" >Left <span class =" common left" >Left</span ></span >
60
- <span class =" tooltip" >Right <span class =" common right" >Right</span ></span >
61
-
62
- <!-- success color -->
63
- <span class =" tooltip" >Top <span class =" success top" >Top</span ></span >
64
- <span class =" tooltip" >Bottom <span class =" success bottom" >Bottom</span ></span >
65
- <span class =" tooltip" >Left <span class =" success left" >Left</span ></span >
66
- <span class =" tooltip" >Right <span class =" success right" >Right</span ></span >
67
-
68
- <!-- warning color -->
69
- <span class =" tooltip" >Top <span class =" warning top" >Top</span ></span >
70
- <span class =" tooltip" >Bottom <span class =" warning bottom" >Bottom</span ></span >
71
- <span class =" tooltip" >Left <span class =" warning left" >Left</span ></span >
72
- <span class =" tooltip" >Right <span class =" warning right" >Right</span ></span >
73
-
74
- <!-- danger color -->
75
- <span class =" tooltip" >Top <span class =" danger top" >Top</span ></span >
76
- <span class =" tooltip" >Bottom <span class =" danger bottom" >Bottom</span ></span >
77
- <span class =" tooltip" >Left <span class =" danger left" >Left</span ></span >
78
- <span class =" tooltip" >Right <span class =" danger right" >Right</span ></span >
79
52
```
80
53
81
54
Enjoy tooltip.
0 commit comments