Difference between pages "Template:Tt" and "Template:Tt/sandbox"

From Detective Conan Wiki
(Difference between pages)
Page 1
Page 2
(Undo revision 393928 by Tsutomu25 (talk))
(Tag: Undo)
 
 
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
+
<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 */
−
     .tt-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 */
−
     .tt-container {
+
     .ttt-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 30: Line 29:
 
      
 
      
 
     /* Container appear above target */
 
     /* Container appear above target */
−
     .tt-container-above {
+
     .ttt-container-above {
−
         bottom: calc(100% - 2px);
+
         bottom: 90%;
 
         transform: translate(-50%, 3px);
 
         transform: translate(-50%, 3px);
 
     }
 
     }
 
      
 
      
 
     /* Container appear below target */
 
     /* Container appear below target */
−
     .tt-container-below {
+
     .ttt-container-below {
−
         top: calc(100% - 2px);
+
         top: 90%;
 
         transform: translate(-50%, -3px);
 
         transform: translate(-50%, -3px);
 
     }
 
     }
Line 44: Line 43:
 
      
 
      
 
     /* The TOOLTIP itself */
 
     /* The TOOLTIP itself */
−
     .tt-tooltip {
+
     .ttt-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 56: Line 58:
 
     /* CHEVRON CLASSES */
 
     /* CHEVRON CLASSES */
 
     /* Shared class */
 
     /* Shared class */
−
     .tt-chevron {
+
     .ttt-chevron {
 
         position: absolute;
 
         position: absolute;
 
         left: 50%;
 
         left: 50%;
Line 67: Line 69:
 
      
 
      
 
     /* When tooltip is above */
 
     /* When tooltip is above */
−
     .tt-container-above .tt-chevron {
+
     .ttt-container-above .ttt-chevron {
−
         top: calc(100% - 3px);
+
         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 74: Line 76:
 
      
 
      
 
     /* When tooltip is below */
 
     /* When tooltip is below */
−
     .tt-container-below .tt-chevron {
+
     .ttt-container-below .ttt-chevron {
 
         bottom: calc(100% - 2px);
 
         bottom: calc(100% - 2px);
 
         border-width: 0 9px 9px 9px;
 
         border-width: 0 9px 9px 9px;
Line 84: Line 86:
 
     /* HOVER ANIMATION CLASSES */
 
     /* HOVER ANIMATION CLASSES */
 
     /* Tooltip fade-in */
 
     /* Tooltip fade-in */
−
     .tt-target:hover .tt-container {
+
     .ttt-target:hover .ttt-container {
 
         opacity: 1;
 
         opacity: 1;
 
         transform: translate(-50%, 0);
 
         transform: translate(-50%, 0);
Line 94: Line 96:
  
 
     /* Text bold on hover */
 
     /* Text bold on hover */
−
     .tt-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>{{Documentation}}
+
    // Run on page load, resize, and scroll
−
<pre>text text {{tt|Hover me|blablablablabla}} text text</pre>
+
    adjustTooltipPositions();
−
Results in: text text {{tt|Hover me|blablablablabla}} text text
+
    window.addEventListener("resize", adjustTooltipPositions);
−
[[Category:Templates]]
+
    window.addEventListener("scroll", adjustTooltipPositions, true);
 +
});
 +
</pre>
 
</noinclude>
 
</noinclude>
Retrieved from "https://www.detectiveconanworld.com/wiki/Special:ComparePages"