Jump to content

Template:Tt/sandbox: Difference between revisions

From Detective Conan Wiki
← Older edit
R0o0di (talk | contribs)
Administrators
1,346 edits
No edit summary
No edit summary
 
(34 intermediate revisions by 2 users not shown)
Line 1: Line 1:
<includeonly>{{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
|html=%3Cspan%20class%3D%22tooltip-target%22%3E%0A%20%20%7B%7B%7Bparam%7D%7D%7D%0A%20%20%3Cinput%20type%3D%22checkbox%22%20class%3D%22tooltip-toggle%22%20id%3D%22%7B%7B%7BUID%7D%7D%7D%22%2F%3E%0A%20%20%3Clabel%20class%3D%22tooltip-container%20tooltip-container-above%22%20for%3D%22%7B%7B%7BUID%7D%7D%7D%22%3E%0A%20%20%20%20%3Cspan%20class%3D%22tooltip%22%3E%0A%20%20%20%20%20%20%7B%7B%7Bparam2%7D%7D%7D%0A%20%20%20%20%20%20%3Cspan%20class%3D%22chevron%22%3E%3C%2Fspan%3E%0A%20%20%20%20%3C%2Fspan%3E%0A%20%20%3C%2Flabel%3E%0A%3C%2Fspan%3E
|param={{{1}}}
|param2={{{2}}}
|css=
|css=
/* Target word for the tooltip to focus on */
    /* Target word for the tooltip to focus on */
.tooltip-target {
    .ttt-target {
  position: relative;
        position: relative;
  display: inline-block;
        display: inline-block;
  border-bottom: 0.0625em dotted;
        border-bottom: 0.0625em dotted;
  cursor: help;
        cursor: help;
}
    }
 
   
.tooltip-toggle {
   
  display: none;
    /* CONTAINER CLASSES */
}
    /* A so-called 'container' for the tooltip to work around in */
 
    .ttt-container {
/* CONTAINER CLASSES */
        position: absolute;
/* A so-called 'container' for the tooltip to work around in */
        left: 50%;
.tooltip-container {
        min-height: 1em;
  position: absolute;
        width: 170px;
  left: 50%;
        padding: 10px 0 8px;
  min-height: 1em;
        display: flex;
  width: 170px;
        justify-content: center;
  padding: 10px 0 8px;
        opacity: 0;
  display: flex;
        pointer-events: none;
  justify-content: center;
        user-select: none;
  opacity: 0;
        -webkit-user-select: none;
  pointer-events: none;
        -ms-user-select: none;
  user-select: none;
        transition: 0.3s ease 0.1s; /* This is used for the hover animations */
  -webkit-user-select: none;
    }
  -ms-user-select: none;
   
  transition: 0.3s ease;
    /* Container appear above target */
  padding: 10px 0 8px;
    .ttt-container-above {
  transition: 0.3s ease 0.1s; /* This is used for the hover animations */
        bottom: 90%;
}
        transform: translate(-50%, 3px);
 
    }
/* Container appear above target */
   
.tooltip-container-above {
    /* Container appear below target */
  bottom: 90%;
    .ttt-container-below {
  transform: translate(-50%, 3px);
        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 */
   
      
      
/* Container appear below target */
    /* HOVER ANIMATION CLASSES */
.tooltip-container-below {
    /* Tooltip fade-in */
  top: 90%;
    .ttt-target:hover .ttt-container {
  transform: translate(-50%, -3px);
        opacity: 1;
}
        transform: translate(-50%, 0);
/* END OF CONTAINER CLASSES */
        pointer-events: auto;
        user-select: auto;
        -webkit-user-select: auto;
        -ms-user-select: auto;
    }


    /* Text bold on hover */
    .ttt-target:hover {
        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>


/* The TOOLTIP itself */
<code>tt/sandbox </code> We love {{tt/sandbox|DC|Detective Conan<ref>wjdid</ref>}}<ref>qwoidjqwoi</ref><ref>e9qjr</ref>
.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;
}


<code>tt/sandbox </code> We love {{tt/sandbox|DC|Detective Conan<ref>wjdid</ref>}}<ref>qwoidjqwoi</ref><ref>e9qjr</ref>


/* CHEVRON CLASSES */
<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>
/* Shared class */
.chevron {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-style: solid;
  z-index: 998;
}


/* When tooltip is above */
<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-container-above .chevron {
  top: 95%;
  border-width: 9px 9px 0 9px;
  border-color: #fff transparent transparent transparent;
}


/* When tooltip is below */
<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-container-below .chevron {
  bottom: 95%;
  border-width: 0 9px 9px 9px;
  border-color: transparent transparent #fff transparent;
}
/* END OF CHEVRON CLASSES */




/* HOVER ANIMATION CLASSES */
<br>
/* tooltip fade-in */
<br>
/* when text is clicked on touchscreens */
<br>
/* @media (max-width: 450px) and (pointer: coarse) { */
<br>
@media (max-width: 450px) {
<br>
  .tooltip-toggle:checked + .tooltip-container {
<br>
    opacity: 1;
<br>
    transform: translate(-50%, 0);
<br>
    pointer-events: auto;
<br>
    user-select: auto;
<br>
    webkit-user-select: auto;
<br>
    ms-user-select: auto;
<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>


/* Hover for desktop */
<pre>
@media (hover: hover) and (pointer: fine) {
// IMPORTANT: When testing using the browser console, remove the DOMContentLoaded event listener
.tooltip-target:hover .tooltip-container {
    document.addEventListener("DOMContentLoaded", function () {
    opacity: 1;
    var tooltips = document.querySelectorAll(".ttt-container");
    transform: translate(-50%, 0);
   
    pointer-events: auto;
    function adjustTooltipPositions() {
    user-select: auto;
        Array.prototype.forEach.call(tooltips, function (tooltipContainer) {
    webkit-user-select: auto;
            var tooltip = tooltipContainer.querySelector(".ttt-tooltip");
    ms-user-select: auto;
            var chevron = tooltip.querySelector(".ttt-chevron");
}
           
}
            // 1. Temporarily show tooltip to measure size
/* END OF HOVER ANIMATION CLASSES */
            tooltipContainer.style.opacity = "0";
 
            tooltipContainer.style.display = "flex";
}}</includeonly><noinclude>We love {{tt/sandbox|DC|Detective Conan}}<ref>qwoidjqwoi</ref><ref>e9qjr</ref></noinclude>
            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);
});
</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"