Template:Tt/sandbox: Difference between revisions
Restored unique class names, replaced meaningless text with meaningless line breaks |
mNo edit summary |
||
| Line 5: | Line 5: | ||
position: relative; | position: relative; | ||
display: inline-block; | display: inline-block; | ||
border- | border-bottom: 0.0625em dotted; | ||
cursor: help; | cursor: help; | ||
} | } | ||
| Line 30: | Line 30: | ||
/* Container appear above target */ | /* Container appear above target */ | ||
.ttt-container-above { | .ttt-container-above { | ||
bottom: 90%; | |||
transform: translate(-50%, 3px); | transform: translate(-50%, 3px); | ||
} | } | ||
| Line 77: | Line 77: | ||
/* When tooltip is below */ | /* When tooltip is below */ | ||
.ttt-container-below .ttt-chevron { | .ttt-container-below .ttt-chevron { | ||
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 97: | Line 97: | ||
/* Text bold on hover */ | /* Text bold on hover */ | ||
.ttt-target:hover { | .ttt-target:hover { | ||
border- | border-bottom: 0.0625em dashed; | ||
} | } | ||
/* END OF HOVER ANIMATION CLASSES */ | /* END OF HOVER ANIMATION CLASSES */ | ||
</includeonly><noinclude>We love {{tt/sandbox|DC|Detective Conan<ref>wjdid</ref>}}<ref>qwoidjqwoi</ref><ref>e9qjr</ref> | |||
<br> | <br> | ||
<br> | <br> | ||
Revision as of 21:13, 10 June 2025
We love DC{{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 */