/* * Accessible Pure CSS Tooltips * Copyright (C) 2008, 2011 Thomas 'PointedEars' Lahn * * This program is free software: you can redistribute it and/or modify * it under the terms of the GNU General Public License as published by * the Free Software Foundation, either version 3 of the License, or * (at your option) any later version. * * This program is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU General Public License for more details. * * You should have received a copy of the GNU General Public License * along with this program. If not, see . */ .tooltip { position: relative; border-bottom: 1px dotted black; text-decoration: none; cursor: help; } .tooltip span { display: none; visibility: hidden; opacity: 0; -moz-transition: visibility 0.5s linear; -webkit-transition: visibility 0.5s linear; position: absolute; width: 11em; height: auto; padding: 2px 5px 5px 5px; border: 1px solid #666; box-shadow: 6px 6px 6px #666; -moz-box-shadow: 6px 6px 6px #666; -webkit-box-shadow: 6px 6px 6px #666; background-color: #ffc !important; color: black; text-decoration: none; } .tooltip>span { width: auto; min-width: 11em; } .tooltip:hover span, .tooltip:focus span { display: block; visibility: visible; opacity: 1; z-index: 1337; } /* Copyright note */ .tooltip span:after { display: block; margin: 0.5em 0 0 0; border-top: 1px solid gray; padding-top: 0.5em; background-color: transparent; content: "Accessible Pure\a0 CSS\a0 Tooltips\0d \0a\ Copyright\a0 \a9 \a0 2008,\a0 2010\a0 \a0 \ Thomas\a0 'PointedEars'\a0 Lahn .\0d \0a \ Distributed under the\a0 GNU\a0 GPL\a0 v3 or later."; color: gray; font-size: xx-small; } *>.tooltip span:after { color: black; opacity: 0.9; } /* elements of the tooltip contents to hide when the tooltop is displayed */ .tooltip span span { position: relative; visibility: visible; display: inline; padding: 0; border: none; } .tooltip:hover span span, .tooltip:focus span span { visibility: hidden; display: none; }