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 | } |