|
1 | 1 | ## Tooltip
|
2 | 2 |
|
3 | 3 | Simple tooltip.
|
| 4 | + |
| 5 | +## Installation |
| 6 | + |
| 7 | +``` |
| 8 | +npm install --save css-ui-tooltip |
| 9 | +``` |
| 10 | + |
| 11 | +## Demo |
| 12 | + |
| 13 | +- https://css-ui.github.io/tooltip |
| 14 | + |
| 15 | +## Quick start |
| 16 | + |
| 17 | +CSS dependencies. |
| 18 | + |
| 19 | +```html |
| 20 | +<link rel="stylesheet" href="path/to/normalize.css"> |
| 21 | +<link rel="stylesheet" href="path/to/open-sans.css"> |
| 22 | +<link rel="stylesheet" href="path/to/cssui.css"> |
| 23 | +``` |
| 24 | + |
| 25 | +CSS tooltip style. |
| 26 | + |
| 27 | +```html |
| 28 | +<link rel="stylesheet" href="path/to/style.tooltip.css"> |
| 29 | +``` |
| 30 | + |
| 31 | +CSS tooltip theme. |
| 32 | + |
| 33 | +```html |
| 34 | +<link rel="stylesheet" href="path/to/style.tooltip.theme.css"> |
| 35 | +``` |
| 36 | + |
| 37 | +Set font. |
| 38 | + |
| 39 | +```html |
| 40 | +<style> |
| 41 | + body { |
| 42 | + font-family: 'Open Sans', sans-serif; |
| 43 | + } |
| 44 | +</style> |
| 45 | + |
| 46 | +Simple tooltip html. |
| 47 | + |
| 48 | +```html |
| 49 | +<!-- primary color --> |
| 50 | +<span class="tooltip">Top <span class="primary top">Top</span></span> |
| 51 | +<span class="tooltip">Bottom <span class="primary bottom">Bottom</span></span> |
| 52 | +<span class="tooltip">Left <span class="primary left">Left</span></span> |
| 53 | +<span class="tooltip">Right <span class="primary right">Right</span></span> |
| 54 | + |
| 55 | +<!-- common color --> |
| 56 | +<span class="tooltip">Top <span class="common top">Top</span></span> |
| 57 | +<span class="tooltip">Bottom <span class="common bottom">Bottom</span></span> |
| 58 | +<span class="tooltip">Left <span class="common left">Left</span></span> |
| 59 | +<span class="tooltip">Right <span class="common right">Right</span></span> |
| 60 | + |
| 61 | +<!-- success color --> |
| 62 | +<span class="tooltip">Top <span class="success top">Top</span></span> |
| 63 | +<span class="tooltip">Bottom <span class="success bottom">Bottom</span></span> |
| 64 | +<span class="tooltip">Left <span class="success left">Left</span></span> |
| 65 | +<span class="tooltip">Right <span class="success right">Right</span></span> |
| 66 | + |
| 67 | +<!-- warning color --> |
| 68 | +<span class="tooltip">Top <span class="warning top">Top</span></span> |
| 69 | +<span class="tooltip">Bottom <span class="warning bottom">Bottom</span></span> |
| 70 | +<span class="tooltip">Left <span class="warning left">Left</span></span> |
| 71 | +<span class="tooltip">Right <span class="warning right">Right</span></span> |
| 72 | + |
| 73 | +<!-- danger color --> |
| 74 | +<span class="tooltip">Top <span class="danger top">Top</span></span> |
| 75 | +<span class="tooltip">Bottom <span class="danger bottom">Bottom</span></span> |
| 76 | +<span class="tooltip">Left <span class="danger left">Left</span></span> |
| 77 | +<span class="tooltip">Right <span class="danger right">Right</span></span> |
| 78 | +``` |
| 79 | + |
| 80 | +Enjoy tooltip. |
0 commit comments