|
|
| Line 1: |
Line 1: |
| − | <includeonly><span class="tt-target">{{{1}}}<span class="tt-container tt-container-above" style="display: none;"><span class="tt-tooltip">{{{2}}}<span class="tt-chevron"></span></span></span></span>{{code
| |
| − | |css=
| |
| − | /* Target word for the tooltip to focus on */
| |
| − | .tt-target {
| |
| − | position: relative;
| |
| − | display: inline-block;
| |
| − | border-bottom: 0.0625em dotted;
| |
| − | cursor: help;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | /* CONTAINER CLASSES */
| |
| − | /* A so-called 'container' for the tooltip to work around in */
| |
| − | .tt-container {
| |
| − | position: absolute;
| |
| − | left: 50%;
| |
| − | min-height: 1em;
| |
| − | width: 170px;
| |
| − | padding: 10px 0 8px;
| |
| − | display: flex;
| |
| − | justify-content: center;
| |
| − | opacity: 0;
| |
| − | z-index: 999;
| |
| − | pointer-events: none;
| |
| − | user-select: none;
| |
| − | -webkit-user-select: none;
| |
| − | -ms-user-select: none;
| |
| − | transition: 0.3s ease 0.1s; /* This is used for the hover animations */
| |
| − | }
| |
| − |
| |
| − | /* Container appear above target */
| |
| − | .tt-container-above {
| |
| − | bottom: calc(100% - 2px);
| |
| − | transform: translate(-50%, 3px);
| |
| − | }
| |
| − |
| |
| − | /* Container appear below target */
| |
| − | .tt-container-below {
| |
| − | top: calc(100% - 2px);
| |
| − | transform: translate(-50%, -3px);
| |
| − | }
| |
| − | /* END OF CONTAINER CLASSES */
| |
| − |
| |
| − |
| |
| − | /* The TOOLTIP itself */
| |
| − | .tt-tooltip {
| |
| − | background: #fff;
| |
| − | border-radius: 4px;
| |
| − | filter: drop-shadow(0 1px 4px rgba(0,0,0,0.6));
| |
| − | padding: 6px 9px;
| |
| − | text-align: center;
| |
| − | overflow-wrap: anywhere;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | /* CHEVRON CLASSES */
| |
| − | /* Shared class */
| |
| − | .tt-chevron {
| |
| − | position: absolute;
| |
| − | left: 50%;
| |
| − | transform: translateX(-50%);
| |
| − | width: 0;
| |
| − | height: 0;
| |
| − | border-style: solid;
| |
| − | z-index: 998;
| |
| − | }
| |
| − |
| |
| − | /* When tooltip is above */
| |
| − | .tt-container-above .tt-chevron {
| |
| − | top: calc(100% - 3px);
| |
| − | border-width: 9px 9px 0 9px;
| |
| − | border-color: #fff transparent transparent transparent;
| |
| − | }
| |
| − |
| |
| − | /* When tooltip is below */
| |
| − | .tt-container-below .tt-chevron {
| |
| − | bottom: calc(100% - 2px);
| |
| − | border-width: 0 9px 9px 9px;
| |
| − | border-color: transparent transparent #fff transparent;
| |
| − | }
| |
| − | /* END OF CHEVRON CLASSES */
| |
| − |
| |
| − |
| |
| − | /* HOVER ANIMATION CLASSES */
| |
| − | /* Tooltip fade-in */
| |
| − | .tt-target:hover .tt-container {
| |
| − | opacity: 1;
| |
| − | transform: translate(-50%, 0);
| |
| − | pointer-events: auto;
| |
| − | user-select: auto;
| |
| − | -webkit-user-select: auto;
| |
| − | -ms-user-select: auto;
| |
| − | }
| |
| | | | |
| − | /* Text bold on hover */
| |
| − | .tt-target:hover {
| |
| − | border-bottom: 0.0625em dashed;
| |
| − | }
| |
| − | /* END OF HOVER ANIMATION CLASSES */
| |
| − |
| |
| − | }}</includeonly>
| |
