Difference between revisions of "Template:Tt/sandbox"

From Detective Conan Wiki
 
(48 intermediate revisions by 2 users not shown)
Line 1: Line 1:
−
<includeonly><span class="tooltip-target" style="white-space: initial; overflow-x: initial;">{{{1}}}<span class="tooltip-container tooltip-container-above"><span class="tooltip">{{{2}}}<span class="chevron"></span></span></span></span></includeonly>
+
<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=
 
     /* 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;
Line 13: 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 {
+
     .ttt-container {
 
         position: absolute;
 
         position: absolute;
 
         left: 50%;
 
         left: 50%;
−
        transform: translateX(-50%);
 
 
         min-height: 1em;
 
         min-height: 1em;
 
         width: 170px;
 
         width: 170px;
Line 31: Line 29:
 
      
 
      
 
     /* Container appear above target */
 
     /* Container appear above target */
−
     .tooltip-container-above {
+
     .ttt-container-above {
 
         bottom: 90%;
 
         bottom: 90%;
 
         transform: translate(-50%, 3px);
 
         transform: translate(-50%, 3px);
Line 37: Line 35:
 
      
 
      
 
     /* Container appear below target */
 
     /* Container appear below target */
−
     .tooltip-container-below {
+
     .ttt-container-below {
 
         top: 90%;
 
         top: 90%;
 
         transform: translate(-50%, -3px);
 
         transform: translate(-50%, -3px);
Line 45: Line 43:
 
      
 
      
 
     /* The TOOLTIP itself */
 
     /* The TOOLTIP itself */
−
     .tooltip {
+
     .ttt-tooltip {
 
         background: #fff;
 
         background: #fff;
 
         border-radius: 4px;
 
         border-radius: 4px;
Line 54: Line 52:
 
         word-wrap: break-word;
 
         word-wrap: break-word;
 
         z-index: 999;
 
         z-index: 999;
 +
        text-align: center;
 
     }
 
     }
 
      
 
      
Line 59: Line 58:
 
     /* CHEVRON CLASSES */
 
     /* CHEVRON CLASSES */
 
     /* Shared class */
 
     /* Shared class */
−
     .chevron {
+
     .ttt-chevron {
 
         position: absolute;
 
         position: absolute;
 
         left: 50%;
 
         left: 50%;
Line 70: Line 69:
 
      
 
      
 
     /* When tooltip is above */
 
     /* When tooltip is above */
−
     .tooltip-container-above .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 77: Line 76:
 
      
 
      
 
     /* When tooltip is below */
 
     /* When tooltip is below */
−
     .tooltip-container-below .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 86: Line 85:
 
      
 
      
 
     /* HOVER ANIMATION CLASSES */
 
     /* HOVER ANIMATION CLASSES */
−
     /* Above tooltip fade-in */
+
     /* Tooltip fade-in */
−
     .tooltip-target:hover .tooltip-container-above {
+
     .ttt-target:hover .ttt-container {
 
         opacity: 1;
 
         opacity: 1;
 
         transform: translate(-50%, 0);
 
         transform: translate(-50%, 0);
Line 95: Line 94:
 
         -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 {
+
     .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>
−
}}<noinclude>We love {{tt/sandbox|DC|Detective Conan<ref>oje1io2he</ref>}} jbjb jjb <ref>qwoidjqwoi</ref><ref>e9qjr</ref> jjj bjbj
+
<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>
  
−
We love {{tt/sandbox|DC|Detective Conan}}<ref>qwoidjqwoi</ref> bjbj <ref>e9qjr</ref> bjbjbj bjb
+
<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>
  
−
We love {{tt/sandbox|DC|Detective Conan}}<ref>qwoidjqwoi</ref><ref>e9qjr</ref> bjbjb
+
<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>
  
−
We love {{tt|DC|Detective Conan}} sddsdsd
+
<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>
  
−
{{InfoBox Char
 
−
| name                = Ran Mouri
 
−
| japanese-name      = 毛利 蘭 <br> (Mōri Ran)
 
−
| english-name        = Rachel Moore
 
−
| image              = Ran Mouri Profile.jpg
 
−
| age                = Manga: 16<ref name="Goshodayinterview">{{cite web|url=http://www.detectiveconanworld.com/forum/topic/1555-translating-interviews/page__st__20__p__245256#entry245256|date=2012-01-05|accessdate=2012-01-05|publisher=|title=Translating Interviews - Let's Talk with Gosho Aoyama-sensei Day}}</ref><br> Anime: 17<ref>Episode 678: Ran claims she is 17 when talking to the film crew</ref>
 
−
| gender              = Female
 
−
| height              = 165 cm<ref>https://k.mandarake.co.jp/auction/item/itemInfoJa.html?index=595531</ref>
 
−
| weight              = {{Bracket|52 kg|115 lbs}}<ref name="CD44">Conan Drill Page 44</ref>
 
−
| date-of-birth      = unknown<ref>In movie 1, Ran's birthday is sometime before May 20t. In the manga, both teenagers are 16 years old, meaning that if this is true that Shin'ichi would be only slightly older than Ran, ergo Ran's birthday would (non-canonically) fall between May 5th and May 20th.</ref>
 
−
| relatives          = [[Kogoro Mouri]] (father) <br> [[Eri Kisaki]] (mother) <br> [[Mr. Kisaki]] (maternal grandfather) <br> Mr. Mouri (paternal grandfather) <br> Mrs. Mouri (paternal grandmother)
 
−
| occupation          = Teitan High School student <br> Karate club captain <br> Kanto Region karate champion
 
−
|status              = Alive
 
−
| nicknames          = Angel ([[Vermouth]]) <br> Ranmaru ([[Hina Wada]])
 
−
| first-appearance    = Manga: [[Volume 1#File 001 - The Heisei Holmes|File 1]] <br> Anime: [[Roller Coaster Murder Case|Episode 1]]
 
−
| appearances        = {{:Ran Mouri Appearances}}
 
−
| cases-solved        = 3 (on her own)
 
−
| keyhole            = [[Volume 2]]
 
−
| japanese-voice      = [[Wakana Yamazaki]]
 
−
| english-voice      = [[Colleen Clinkenbeard]] (FUNimation) <br> [[Cristina Vee]] (Bang Zoom!, Macias Group)<ref>{{cite web|url=https://en.wikipedia.org/wiki/Detective_Conan:_Zero_the_Enforcer|title=Detective Conan: Zero the Enforcer-Wikipedia|date=|publisher=https://en.wikipedia.org|accessdate=2019-09-02}}</ref>
 
−
| drama-actor        = [[Tomoka Kurokawa]] (1st) <br> [[Shiori Kutsuna]] (2nd)
 
−
| footnotes          =
 
−
}}
 
  
 +
<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 = "";
 +
        });
 +
    }
 +
   
 +
    // Run on page load, resize, and scroll
 +
    adjustTooltipPositions();
 +
    window.addEventListener("resize", adjustTooltipPositions);
 +
    window.addEventListener("scroll", adjustTooltipPositions, true);
 +
});
 +
</pre>
 
</noinclude>
 
</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"