/* * Accessible Pure CSS Tooltips * Copyright (C) 2008, 2015 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-container { position: relative; border-bottom: 1px dotted black; text-decoration: none; cursor: help; } .tooltip-container .tooltip { visibility: hidden; opacity: 0; 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; overflow: auto; } .tooltip-container>.tooltip { width: auto; min-width: 11em; } .tooltip-container:hover .tooltip, .tooltip-contaniner:focus .tooltip { visibility: visible; opacity: 1; z-index: 1337; } /* Copyright note */ .tooltip-container .tooltip: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 2015\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-container .tooltip:after { color: black; opacity: 0.9; } /* elements of the tooltip contents to hide when the tooltip is displayed */ .tooltip-container .tooltip .hidden { position: relative; visibility: visible; display: inline; padding: 0; border: none; } .tooltip-container:hover .tooltip .hidden, .tooltip-container:focus .tooltip .hidden { visibility: hidden; display: none; }