/* ************************************************************************ * File: tooltip.css * * Purpose: tooltip css (tooltip.js also required) * * This file is part of a software by Jens Gienau. * (c)1999 - 2021 Jens Gienau / www.gienau.com / mail@gienau.com ************************************************************************ */ #tooltip { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; text-align: left; color: #fff; font-size: 11px; line-height: 1.5em; background: #3c3c3c; position: absolute; z-index: 100; padding: 5px; -webkit-hyphens: auto; -webkit-hyphenate-limit-chars: auto 3; -webkit-hyphenate-limit-lines: 4; -ms-hyphens: auto; -ms-hyphenate-limit-chars: auto 3; -ms-hyphenate-limit-lines: 4; hyphens: auto; /* in HTML document required */ hyphenate-limit-chars: auto 3; hyphenate-limit-lines: 4; } #tooltip:after { /* triangle decoration */ width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid #3c3c3c; content: ''; position: absolute; left: 50%; bottom: -10px; margin-left: -10px; } #tooltip.top:after { border-top-color: transparent; border-bottom: 10px solid #3c3c3c; top: -20px; bottom: auto; } #tooltip.left:after { left: 10px; margin: 0; } #tooltip.right:after { right: 10px; left: auto; margin: 0; } #tooltip a { color: #000; text-decoration: underline; } #tooltip a:hover { color: gray; text-decoration: underline; }