Jump to content

Template:Tt/sandbox: Difference between revisions

From Detective Conan Wiki
← Older edit
R0o0di (talk | contribs)
Administrators
1,346 edits
Changing the class name to something more unique; initial opacity set back to 0
No edit summary
 
(24 intermediate revisions by 2 users not shown)
Line 1: Line 1:
<includeonly><span class="tt12345-target" style="white-space: initial; overflow-x: initial;">{{{1}}}<span class="tt12345-container tt12345-container-above"><span class="tt12345">{{{2}}}<span class="tt12345-chevron"></span></span></span></span>{{code
<includeonly><span class="ttt-target">{{{1}}}<span class="ttt-container ttt-container-above" style="display: none;"><span class="ttt-tooltip">{{{2}}}<span class="ttt-chevron"></span></span></span></span>{{code
|css=
|css=
     /* Target word for the tooltip to focus on */
     /* Target word for the tooltip to focus on */
     .tt12345-target {
     .ttt-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 */
     .tt12345-container {
     .ttt-container {
         position: absolute;
         position: absolute;
         left: 50%;
         left: 50%;
        transform: translateX(-50%);
         min-height: 1em;
         min-height: 1em;
         width: 170px;
         width: 170px;
Line 30: Line 29:
      
      
     /* Container appear above target */
     /* Container appear above target */
     .tt12345-container-above {
     .ttt-container-above {
         bottom: 90%;
         bottom: 90%;
         transform: translate(-50%, 3px);
         transform: translate(-50%, 3px);
Line 36: Line 35:
      
      
     /* Container appear below target */
     /* Container appear below target */
     .tt12345-container-below {
     .ttt-container-below {
         top: 90%;
         top: 90%;
         transform: translate(-50%, -3px);
         transform: translate(-50%, -3px);
Line 44: Line 43:
      
      
     /* The TOOLTIP itself */
     /* The TOOLTIP itself */
     .tt12345 {
     .ttt-tooltip {
         background: #fff;
         background: #fff;
         border-radius: 4px;
         border-radius: 4px;
Line 52: Line 51:
         height: min-content;
         height: min-content;
         word-wrap: break-word;
         word-wrap: break-word;
         /* z-index: 999;*/
         z-index: 999;
        text-align: center;
     }
     }
      
      
Line 58: Line 58:
     /* CHEVRON CLASSES */
     /* CHEVRON CLASSES */
     /* Shared class */
     /* Shared class */
     .tt12345-chevron {
     .ttt-chevron {
         position: absolute;
         position: absolute;
         left: 50%;
         left: 50%;
Line 69: Line 69:
      
      
     /* When tooltip is above */
     /* When tooltip is above */
     .tt12345-container-above .tt12345-chevron {
     .ttt-container-above .ttt-chevron {
         top: 95%;
         top: calc(100% - 2px);
         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 76:
      
      
     /* When tooltip is below */
     /* When tooltip is below */
     .tt12345-container-below .tt12345-chevron {
     .ttt-container-below .ttt-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 85:
      
      
     /* HOVER ANIMATION CLASSES */
     /* HOVER ANIMATION CLASSES */
     /* Above tooltip fade-in */
     /* Tooltip fade-in */
     .tt12345-target:hover .tt12345-container {
     .ttt-target:hover .ttt-container {
         opacity: 1;
         opacity: 1;
         transform: translate(-50%, 0);
         transform: translate(-50%, 0);
Line 94: Line 94:
         -ms-user-select: auto;
         -ms-user-select: auto;
     }
     }
   
 
     /* Text bold on hover */
     /* Text bold on hover */
     .tt12345-target:hover {
     .ttt-target:hover {
         border-bottom: 0.0625em dashed;
         border-bottom: 0.0625em dashed;
     }
     }
     /* END OF HOVER ANIMATION CLASSES */
     /* END OF HOVER ANIMATION CLASSES */
}}</includeonly><noinclude>
<code>tt/sandbox </code> We love {{tt/sandbox|DC|Detective Conan<ref>wjdid</ref>}}<ref>qwoidjqwoi</ref><ref>e9qjr</ref>
<code>tt/sandbox </code> We love {{tt/sandbox|DC|Detective Conan<ref>wjdid</ref>}}<ref>qwoidjqwoi</ref><ref>e9qjr</ref>
<code>tt/sandbox </code> We love {{tt/sandbox|DC|Detective Conan<ref>wjdid</ref>}}<ref>qwoidjqwoi</ref><ref>e9qjr</ref>
<code>tt</code> {{tt|DC|Detective Conan Detective Conan Detective Conan Detective Conan Detective Conan Detective Conan Detective Conan Detective Conan Detective Conan Detective Conan Detective Conan <ref>wjdid</ref>}}<ref>qwoidjqwoi</ref><ref>e9qjr</ref>
<code>tt</code> {{tt|DC|Detective Conan Detective Conan Detective Conan Detective Conan Detective Conan Detective Conan Detective Conan Detective Conan Detective Conan Detective Conan Detective Conan <ref>wjdid</ref>}}<ref>qwoidjqwoi</ref><ref>e9qjr</ref>
<code>tt</code> {{tt|DC|Detective Conan Detective Conan Detective Conan Detective Conan Detective Conan Detective Conan Detective Conan Detective Conan Detective Conan Detective Conan Detective Conan <ref>wjdid</ref>}}<ref>qwoidjqwoi</ref><ref>e9qjr</ref>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<pre>
// IMPORTANT: When testing using the browser console, remove the DOMContentLoaded event listener
    document.addEventListener("DOMContentLoaded", function () {
    var tooltips = document.querySelectorAll(".ttt-container");
   
    function adjustTooltipPositions() {
        Array.prototype.forEach.call(tooltips, function (tooltipContainer) {
            var tooltip = tooltipContainer.querySelector(".ttt-tooltip");
            var chevron = tooltip.querySelector(".ttt-chevron");
           
            // 1. Temporarily show tooltip to measure size
            tooltipContainer.style.opacity = "0";
            tooltipContainer.style.display = "flex";
            tooltip.style.transform = "";
           
            var tooltipRect = tooltip.getBoundingClientRect();
            var targetRect = tooltipContainer.parentElement.getBoundingClientRect();
           
            // 2. Measure how much the tooltip is outside the viewport
            var overflowTop = tooltipRect.top < 1;
            var spaceTop = targetRect.top > tooltipRect.height + 10;
            var overflowLeft = Math.min(Math.max(0, -tooltipRect.left), 0.5 * tooltipRect.width - 15);
            var overflowRight = Math.min(Math.max(0, tooltipRect.right - document.documentElement.clientWidth), 0.5 * tooltipRect.width - 15);
           
            // 3. Shift tooltip into view if needed and move chevron accordingly
            if (overflowTop) {
                tooltipContainer.classList.remove("ttt-container-above");
                tooltipContainer.classList.add("ttt-container-below");
            } else if (spaceTop) {
                tooltipContainer.classList.add("ttt-container-above");
                tooltipContainer.classList.remove("ttt-container-below");
            }
           
            if (overflowLeft > 0) {
                tooltip.style.transform = "translateX(calc(" + overflowLeft + "px + 4px))";
                chevron.style.transform = "translateX(calc(-50% - " + overflowLeft + "px - 4px))";
            } else if (overflowRight > 0) {
                tooltip.style.transform = "translateX(calc(-" + overflowRight + "px - 4px))";
                chevron.style.transform = "translateX(calc(-50% + " + overflowRight + "px + 4px))";
            } else {
                tooltip.style.transform = "";
                chevron.style.transform = "";
            }
           
            // 4. Hide it again until hover
            tooltipContainer.style.opacity = "";
            tooltipContainer.style.display = "";
        });
    }
      
      
}}</includeonly><noinclude>We love {{tt/sandbox|DC|Detective Conan<ref>wjdid</ref>}}<ref>qwoidjqwoi</ref><ref>e9qjr</ref></noinclude>
    // Run on page load, resize, and scroll
    adjustTooltipPositions();
    window.addEventListener("resize", adjustTooltipPositions);
    window.addEventListener("scroll", adjustTooltipPositions, true);
});
</pre>
</noinclude>

Latest revision as of 12:50, 11 June 2025

tt/sandbox We love DC[2][3]

tt/sandbox We love DC[5][6]

tt/sandbox We love DC[8][9]

tt DC[11][12]

tt DC[14][15]

tt DC[17][18] 



































































// IMPORTANT: When testing using the browser console, remove the DOMContentLoaded event listener
    document.addEventListener("DOMContentLoaded", function () {
    var tooltips = document.querySelectorAll(".ttt-container");
    
    function adjustTooltipPositions() {
        Array.prototype.forEach.call(tooltips, function (tooltipContainer) {
            var tooltip = tooltipContainer.querySelector(".ttt-tooltip");
            var chevron = tooltip.querySelector(".ttt-chevron");
            
            // 1. Temporarily show tooltip to measure size
            tooltipContainer.style.opacity = "0";
            tooltipContainer.style.display = "flex";
            tooltip.style.transform = "";
            
            var tooltipRect = tooltip.getBoundingClientRect();
            var targetRect = tooltipContainer.parentElement.getBoundingClientRect();
            
            // 2. Measure how much the tooltip is outside the viewport
            var overflowTop = tooltipRect.top < 1;
            var spaceTop = targetRect.top > tooltipRect.height + 10;
            var overflowLeft = Math.min(Math.max(0, -tooltipRect.left), 0.5 * tooltipRect.width - 15);
            var overflowRight = Math.min(Math.max(0, tooltipRect.right - document.documentElement.clientWidth), 0.5 * tooltipRect.width - 15);
            
            // 3. Shift tooltip into view if needed and move chevron accordingly
            if (overflowTop) {
                tooltipContainer.classList.remove("ttt-container-above");
                tooltipContainer.classList.add("ttt-container-below");
            } else if (spaceTop) {
                tooltipContainer.classList.add("ttt-container-above");
                tooltipContainer.classList.remove("ttt-container-below");
            }
            
            if (overflowLeft > 0) {
                tooltip.style.transform = "translateX(calc(" + overflowLeft + "px + 4px))";
                chevron.style.transform = "translateX(calc(-50% - " + overflowLeft + "px - 4px))";
            } else if (overflowRight > 0) {
                tooltip.style.transform = "translateX(calc(-" + overflowRight + "px - 4px))";
                chevron.style.transform = "translateX(calc(-50% + " + overflowRight + "px + 4px))";
            } else {
                tooltip.style.transform = "";
                chevron.style.transform = "";
            }
            
            // 4. Hide it again until hover
            tooltipContainer.style.opacity = "";
            tooltipContainer.style.display = "";
        });
    }
    
    // Run on page load, resize, and scroll
    adjustTooltipPositions();
    window.addEventListener("resize", adjustTooltipPositions);
    window.addEventListener("scroll", adjustTooltipPositions, true);
});
  1. ^ wjdid
  2. ^ qwoidjqwoi
  3. ^ e9qjr
  4. ^ wjdid
  5. ^ qwoidjqwoi
  6. ^ e9qjr
  7. ^ wjdid
  8. ^ qwoidjqwoi
  9. ^ e9qjr
  10. ^ wjdid
  11. ^ qwoidjqwoi
  12. ^ e9qjr
  13. ^ wjdid
  14. ^ qwoidjqwoi
  15. ^ e9qjr
  16. ^ wjdid
  17. ^ qwoidjqwoi
  18. ^ e9qjr
Retrieved from "https://www.detectiveconanworld.com/wiki/index.php?title=Template:Tt/sandbox&oldid=387544"