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