Template:Tt/sandbox

We love DCDetective Conan{{code |css=

   /* Target word for the tooltip to focus on */
   .ttt-target {
       position: relative;
       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;
   }

   /* Text bold on hover */
   .ttt-target:hover {
       border-bottom: 0.0625em dashed;
   }
   /* END OF HOVER ANIMATION CLASSES */