Difference between revisions of "Template:Tt/sandbox"

From Detective Conan Wiki
(Created page with "<includeonly><span class="hover-text">{{{1}}}<span class="tooltip-container"><span class="tooltip"><span class="tooltip-text-container"><span>{{{2}}}</span></span></span></spa...")
 
 
(64 intermediate revisions by 2 users not shown)
Line 1: Line 1:
−
<includeonly><span class="hover-text">{{{1}}}<span class="tooltip-container"><span class="tooltip"><span class="tooltip-text-container"><span>{{{2}}}</span></span></span></span></span>
+
<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
−
{{code
+
|css=
−
|css=.hover-text {
+
    /* Target word for the tooltip to focus on */
−
      display: inline-block;
+
    .ttt-target {
−
      position: relative;
+
        position: relative;
−
      text-decoration: underline dotted;
+
        display: inline-block;
 +
        border-bottom: 0.0625em dotted;
 +
        cursor: help;
 +
    }
 +
   
 +
   
 +
    /* CONTAINER CLASSES */
 +
    /* A so-called 'container' for the tooltip to work around in */
 +
    .ttt-container {
 +
        position: absolute;
 +
        left: 50%;
 +
        min-height: 1em;
 +
        width: 170px;
 +
        padding: 10px 0 8px;
 +
        display: flex;
 +
        justify-content: center;
 +
        opacity: 0;
 +
        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 */
 +
    .ttt-container-above {
 +
        bottom: 90%;
 +
        transform: translate(-50%, 3px);
 +
    }
 +
   
 +
    /* Container appear below target */
 +
    .ttt-container-below {
 +
        top: 90%;
 +
        transform: translate(-50%, -3px);
 +
    }
 +
    /* END OF CONTAINER CLASSES */
 +
   
 +
   
 +
    /* The TOOLTIP itself */
 +
    .ttt-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 CLASSES */
 +
    /* Shared class */
 +
    .ttt-chevron {
 +
        position: absolute;
 +
        left: 50%;
 +
        transform: translateX(-50%);
 +
        width: 0;
 +
        height: 0;
 +
        border-style: solid;
 +
        z-index: 998;
 +
    }
 +
   
 +
    /* When tooltip is above */
 +
    .ttt-container-above .ttt-chevron {
 +
        top: calc(100% - 2px);
 +
        border-width: 9px 9px 0 9px;
 +
        border-color: #fff transparent transparent transparent;
 +
    }
 +
   
 +
    /* When tooltip is below */
 +
    .ttt-container-below .ttt-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 */
 +
    .ttt-target:hover .ttt-container {
 +
        opacity: 1;
 +
        transform: translate(-50%, 0);
 +
        pointer-events: auto;
 +
        user-select: auto;
 +
        -webkit-user-select: auto;
 +
        -ms-user-select: auto;
 
     }
 
     }
  
−
     .hover-text:hover .tooltip-container {
+
    /* Text bold on hover */
−
      opacity: 1;
+
     .ttt-target:hover {
−
      pointer-events: auto;
+
        border-bottom: 0.0625em dashed;
 
     }
 
     }
 +
    /* 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>
  
−
    .tooltip-container {
+
<code>tt/sandbox </code> We love {{tt/sandbox|DC|Detective Conan<ref>wjdid</ref>}}<ref>qwoidjqwoi</ref><ref>e9qjr</ref>
−
      opacity: 0;
+
 
−
      pointer-events: none;
+
<code>tt/sandbox </code> We love {{tt/sandbox|DC|Detective Conan<ref>wjdid</ref>}}<ref>qwoidjqwoi</ref><ref>e9qjr</ref>
−
      transition: opacity .3s ease
+
 
−
    }
+
<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>
  
−
    .tooltip {
 
−
      position: absolute;
 
−
      bottom: 100%;
 
−
      left: 50%;
 
−
      background: #fff;
 
−
      color: #222;
 
−
      padding: 4px 8px;
 
−
      border: 1px solid #a9caf3;
 
−
      border-radius: 4px;
 
−
      box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.3);
 
−
      z-index: 999;
 
−
      width: max-content;
 
−
      max-width: 150px;
 
−
      overflow-wrap: break-word;
 
−
      text-align: center;
 
−
      transform: translateX(-50%) translateY(5px);
 
−
      transition: transform .3s ease;
 
−
    }
 
  
−
    .hover-text:hover .tooltip {
+
<br>
−
      transform: translateX(-50%) translateY(0);
+
<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>
  
−
     .tooltip-text-container {
+
<pre>
−
      font-size: 90%;
+
// IMPORTANT: When testing using the browser console, remove the DOMContentLoaded event listener
−
      margin-bottom: 1px;
+
    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>
+
   
−
<pre>text text {{tt|Hover me|blablablablabla}} text text</pre>
+
    // Run on page load, resize, and scroll
−
Results in: text text {{tt|Hover me|blablablablabla}} text text</noinclude>
+
    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"