|
|
| 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>
| |