Difference between revisions of "Template:Tt/sandbox"
From Detective Conan Wiki
| Line 1: | Line 1: | ||
| − | <includeonly><span class=" | + | <includeonly><span class="tooltip-target">{{{1}}}<span class="tooltip-container tooltip-container-above"><span class="tooltip">{{{2}}}<span class="chevron"></span></span></span></span></includeonly> |
{{code | {{code | ||
| − | |css=. | + | |css=.tooltip-target { |
| − | + | position: relative; | |
| − | + | display: inline-block; | |
| − | + | border-bottom: 0.0625em dotted; | |
| + | cursor: help; | ||
} | } | ||
| + | |||
| − | + | .tooltip-container { | |
| − | + | position: absolute; | |
| − | + | left: 50%; | |
| + | transform: translateX(-50%); | ||
| + | min-height: 1em; | ||
| + | width: 170px; | ||
| + | padding: 10px 0 8px; | ||
| + | display: flex; | ||
| + | justify-content: center; | ||
| + | opacity: 0; | ||
| + | pointer-events: none; | ||
| + | transition: 0.3s ease 0.1s; | ||
} | } | ||
| − | + | ||
| − | .tooltip-container { | + | .tooltip-container-above { |
| − | + | bottom: 90%; | |
| − | + | transform: translate(-50%, 3px); | |
| − | + | } | |
| + | |||
| + | .tooltip-container-below { | ||
| + | top: 90%; | ||
| + | transform: translate(-50%, -3px); | ||
} | } | ||
| − | + | ||
| + | |||
.tooltip { | .tooltip { | ||
| − | + | background: #fff; | |
| − | + | border-radius: 4px; | |
| − | + | filter: drop-shadow(0 1px 4px rgba(0,0,0,0.6)); | |
| − | + | padding: 6px 9px; | |
| − | + | max-width: 100%; | |
| − | + | height: min-content; | |
| − | + | word-wrap: break-word; | |
| − | + | z-index: 999; | |
| − | + | text-align: center; | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
} | } | ||
| − | + | ||
| − | . | + | .chevron { |
| − | + | position: absolute; | |
| + | left: 50%; | ||
| + | transform: translateX(-50%); | ||
| + | width: 0; | ||
| + | height: 0; | ||
| + | border-style: solid; | ||
| + | z-index: 998; | ||
| + | } | ||
| + | |||
| + | .tooltip-container-above .chevron { | ||
| + | top: 95%; | ||
| + | border-width: 9px 9px 0 9px; | ||
| + | border-color: #fff transparent transparent transparent; | ||
| + | } | ||
| + | |||
| + | .tooltip-container-below .chevron { | ||
| + | bottom: 95%; | ||
| + | border-width: 0 9px 9px 9px; | ||
| + | border-color: transparent transparent #fff transparent; | ||
| + | } | ||
| + | |||
| + | |||
| + | .tooltip-target:hover .tooltip-container-above { | ||
| + | opacity: 1; | ||
| + | transform: translate(-50%, 0); | ||
| + | pointer-events: auto; | ||
| + | user-select: auto; | ||
| + | -webkit-user-select: auto; | ||
| + | -ms-user-select: auto; | ||
| + | } | ||
| + | |||
| + | .tooltip-target:hover .tooltip-container-below { | ||
| + | opacity: 1; | ||
| + | transform: translate(-50%, 0); | ||
| + | pointer-events: auto; | ||
| + | user-select: auto; | ||
| + | -webkit-user-select: auto; | ||
| + | -ms-user-select: auto; | ||
} | } | ||
| − | + | ||
| − | .tooltip- | + | .tooltip-target:hover { |
| − | + | border-bottom: 0.0625em dashed; | |
| − | |||
} | } | ||
| − | }} | + | |
| − | + | }}<noinclude>We love {{tt/sandbox|DC|Detective Conan}}</noinclude> | |
| − | |||
| − | </noinclude> | ||
Revision as of 12:05, 7 June 2025
We love DC
