Rev 69 | Go to most recent revision | Details | Compare with Previous | Last modification | View Log | RSS feed
Rev | Author | Line No. | Line |
---|---|---|---|
69 | PointedEar | 1 | <?php \header('Content-Type: text/css; charset=UTF-8'); ?> |
301 | PointedEar | 2 | <?php |
3 | require_once 'css/least/Mixins.php'; |
||
4 | use de\pointedears\css\least\Mixins; |
||
5 | ?> |
||
4 | PointedEar | 6 | /* |
7 | * Accessible Pure CSS Tooltips |
||
301 | PointedEar | 8 | * Copyright (C) 2008, 2015 Thomas 'PointedEars' Lahn <mehl@PointedEars.de> |
4 | PointedEar | 9 | * |
10 | * This program is free software: you can redistribute it and/or modify |
||
11 | * it under the terms of the GNU General Public License as published by |
||
12 | * the Free Software Foundation, either version 3 of the License, or |
||
13 | * (at your option) any later version. |
||
14 | * |
||
15 | * This program is distributed in the hope that it will be useful, |
||
16 | * but WITHOUT ANY WARRANTY; without even the implied warranty of |
||
17 | * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
||
18 | * GNU General Public License for more details. |
||
301 | PointedEar | 19 | * |
4 | PointedEar | 20 | * You should have received a copy of the GNU General Public License |
21 | * along with this program. If not, see <http://www.gnu.org/licenses/>. |
||
22 | */ |
||
23 | |||
301 | PointedEar | 24 | .tooltip-container { |
4 | PointedEar | 25 | position: relative; |
26 | border-bottom: 1px dotted black; |
||
27 | text-decoration: none; |
||
28 | cursor: help; |
||
29 | } |
||
30 | |||
301 | PointedEar | 31 | .tooltip-container .tooltip { |
4 | PointedEar | 32 | visibility: hidden; |
33 | opacity: 0; |
||
301 | PointedEar | 34 | <?php |
35 | Mixins::transition('-property', 'opacity, visibility'); |
||
36 | Mixins::transition('-delay', '0.5s, 0.6s'); |
||
37 | Mixins::transition('-duration', '0.1s, 0s'); |
||
38 | ?> |
||
4 | PointedEar | 39 | position: absolute; |
40 | width: 11em; |
||
41 | height: auto; |
||
42 | padding: 2px 5px 5px 5px; |
||
43 | border: 1px solid #666; |
||
44 | box-shadow: 6px 6px 6px #666; |
||
45 | -moz-box-shadow: 6px 6px 6px #666; |
||
46 | -webkit-box-shadow: 6px 6px 6px #666; |
||
47 | background-color: #ffc !important; |
||
48 | color: black; |
||
49 | text-decoration: none; |
||
301 | PointedEar | 50 | overflow: auto; |
4 | PointedEar | 51 | } |
52 | |||
301 | PointedEar | 53 | .tooltip-container>.tooltip { |
4 | PointedEar | 54 | width: auto; |
55 | min-width: 11em; |
||
56 | } |
||
57 | |||
301 | PointedEar | 58 | .tooltip-container:hover .tooltip, |
59 | .tooltip-contaniner:focus .tooltip |
||
4 | PointedEar | 60 | { |
61 | visibility: visible; |
||
62 | opacity: 1; |
||
301 | PointedEar | 63 | <?php |
64 | Mixins::transition('-property', 'opacity'); |
||
65 | Mixins::transition('-delay', '0.5s'); |
||
66 | Mixins::transition('-duration', '0.1s'); |
||
67 | ?> |
||
4 | PointedEar | 68 | z-index: 1337; |
69 | } |
||
70 | |||
71 | /* Copyright note */ |
||
301 | PointedEar | 72 | .tooltip-container .tooltip:after { |
4 | PointedEar | 73 | display: block; |
74 | margin: 0.5em 0 0 0; |
||
75 | border-top: 1px solid gray; |
||
76 | padding-top: 0.5em; |
||
77 | background-color: transparent; |
||
78 | content: "Accessible Pure\a0 CSS\a0 Tooltips\0d \0a\ |
||
301 | PointedEar | 79 | Copyright\a0 \a9 \a0 2008,\a0 2015\a0 \a0 \ |
4 | PointedEar | 80 | Thomas\a0 'PointedEars'\a0 Lahn <mehl@PointedEars.de>.\0d \0a \ |
81 | Distributed under the\a0 GNU\a0 GPL\a0 v3 or later."; |
||
82 | color: gray; |
||
83 | font-size: xx-small; |
||
84 | } |
||
85 | |||
301 | PointedEar | 86 | *>.tooltip-container .tooltip:after { |
4 | PointedEar | 87 | color: black; |
88 | opacity: 0.9; |
||
89 | } |
||
90 | |||
301 | PointedEar | 91 | /* elements of the tooltip contents to hide when the tooltip is displayed */ |
92 | .tooltip-container .tooltip .hidden { |
||
4 | PointedEar | 93 | position: relative; |
94 | visibility: visible; |
||
95 | display: inline; |
||
96 | padding: 0; |
||
97 | border: none; |
||
98 | } |
||
99 | |||
301 | PointedEar | 100 | .tooltip-container:hover .tooltip .hidden, |
101 | .tooltip-container:focus .tooltip .hidden { |
||
4 | PointedEar | 102 | visibility: hidden; |
103 | display: none; |
||
104 | } |