Jump to content

Template:Tt: Difference between revisions

From Detective Conan Wiki
← Older edit
Tsutomu25 (talk | contribs)
2,794 edits
mNo edit summary
Tsutomu25 (talk | contribs)
2,794 edits
Undo revision 393928 by Tsutomu25 (talk)
Tag: Undo
 
(17 intermediate revisions by 3 users not shown)
Line 1: Line 1:
<includeonly><span class="tooltip-target">{{{1}}}<span class="tooltip-container tooltip-container-above" style="display: none;"><span class="tooltip">{{{2}}}<span class="chevron"></span></span></span></span>{{code
<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=
|css=
     /* Target word for the tooltip to focus on */
     /* Target word for the tooltip to focus on */
     .tooltip-target {
     .tt-target {
         position: relative;
         position: relative;
         display: inline-block;
         display: inline-block;
Line 12: Line 12:
     /* CONTAINER CLASSES */
     /* CONTAINER CLASSES */
     /* A so-called 'container' for the tooltip to work around in */
     /* A so-called 'container' for the tooltip to work around in */
     .tooltip-container {
     .tt-container {
         position: absolute;
         position: absolute;
         left: 50%;
         left: 50%;
Line 21: Line 21:
         justify-content: center;
         justify-content: center;
         opacity: 0;
         opacity: 0;
        z-index: 999;
         pointer-events: none;
         pointer-events: none;
         user-select: none;
         user-select: none;
Line 29: Line 30:
      
      
     /* Container appear above target */
     /* Container appear above target */
     .tooltip-container-above {
     .tt-container-above {
         bottom: 90%;
         bottom: calc(100% - 2px);
         transform: translate(-50%, 3px);
         transform: translate(-50%, 3px);
     }
     }
      
      
     /* Container appear below target */
     /* Container appear below target */
     .tooltip-container-below {
     .tt-container-below {
         top: 90%;
         top: calc(100% - 2px);
         transform: translate(-50%, -3px);
         transform: translate(-50%, -3px);
     }
     }
Line 43: Line 44:
      
      
     /* The TOOLTIP itself */
     /* The TOOLTIP itself */
     .tooltip {
     .tt-tooltip {
         background: #fff;
         background: #fff;
         border-radius: 4px;
         border-radius: 4px;
         filter: drop-shadow(0 1px 4px rgba(0,0,0,0.6));
         filter: drop-shadow(0 1px 4px rgba(0,0,0,0.6));
         padding: 6px 9px;
         padding: 6px 9px;
        max-width: 100%;
        height: min-content;
        word-wrap: break-word;
        z-index: 999;
         text-align: center;
         text-align: center;
        overflow-wrap: anywhere;
     }
     }
      
      
Line 58: Line 56:
     /* CHEVRON CLASSES */
     /* CHEVRON CLASSES */
     /* Shared class */
     /* Shared class */
     .chevron {
     .tt-chevron {
         position: absolute;
         position: absolute;
         left: 50%;
         left: 50%;
Line 69: Line 67:
      
      
     /* When tooltip is above */
     /* When tooltip is above */
     .tooltip-container-above .chevron {
     .tt-container-above .tt-chevron {
         top: 95%;
         top: calc(100% - 3px);
         border-width: 9px 9px 0 9px;
         border-width: 9px 9px 0 9px;
         border-color: #fff transparent transparent transparent;
         border-color: #fff transparent transparent transparent;
Line 76: Line 74:
      
      
     /* When tooltip is below */
     /* When tooltip is below */
     .tooltip-container-below .chevron {
     .tt-container-below .tt-chevron {
         bottom: 95%;
         bottom: calc(100% - 2px);
         border-width: 0 9px 9px 9px;
         border-width: 0 9px 9px 9px;
         border-color: transparent transparent #fff transparent;
         border-color: transparent transparent #fff transparent;
Line 85: Line 83:
      
      
     /* HOVER ANIMATION CLASSES */
     /* HOVER ANIMATION CLASSES */
     /* Above tooltip fade-in */
     /* Tooltip fade-in */
     .tooltip-target:hover .tooltip-container-above {
     .tt-target:hover .tt-container {
         opacity: 1;
         opacity: 1;
         transform: translate(-50%, 0);
         transform: translate(-50%, 0);
Line 94: Line 92:
         -ms-user-select: auto;
         -ms-user-select: auto;
     }
     }
   
 
    /* Below tooltip fade-in */
    .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;
    }
   
     /* Text bold on hover */
     /* Text bold on hover */
     .tooltip-target:hover {
     .tt-target:hover {
         border-bottom: 0.0625em dashed;
         border-bottom: 0.0625em dashed;
     }
     }
     /* END OF HOVER ANIMATION CLASSES */
     /* END OF HOVER ANIMATION CLASSES */
      
      
}}</includeonly><noinclude>
}}</includeonly><noinclude>{{Documentation}}
<pre>text text {{tt|Hover me|blablablablabla}} text text</pre>
<pre>text text {{tt|Hover me|blablablablabla}} text text</pre>
Results in: text text {{tt|Hover me|blablablablabla}} text text
Results in: text text {{tt|Hover me|blablablablabla}} text text
[[Category:Templates]]
[[Category:Templates]]
</noinclude>
</noinclude>

Latest revision as of 12:34, 26 August 2025

Documentation icon Template documentation[create]
text text {{tt|Hover me|blablablablabla}} text text

Results in: text text Hover me text text

Retrieved from "https://www.detectiveconanworld.com/wiki/index.php?title=Template:Tt&oldid=393929"