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