Template:Tooltip/styles.css: Difference between revisions

From Umamusume Wiki
Jump to navigation Jump to search
No edit summary
No edit summary
 
(3 intermediate revisions by the same user not shown)
Line 8: Line 8:
visibility: hidden;
visibility: hidden;
position: absolute;
position: absolute;
     left: 50%;
     left: 0;
     bottom: calc(20px + 100%);
     bottom: calc(2px + 100%);
z-index: 1;
z-index: 1;
min-width: 120px;
min-width: 120px;
padding: 5px 0;
padding: 5px;
background: #fff;
background: #fff;
box-shadow: 0 2px 0 0 rgba(0,0,0,0.15);
box-shadow: 1px 2px 0 0 rgba(0,0,0,0.15);
     border: 1px solid #a2a9b1;
     border: 1px solid #aaa;
     border-radius: 2px;
     border-radius: 5px;
text-align: center;
text-align: center;
white-space: normal;
white-space: normal;
Line 27: Line 27:
.tooltip:hover > .text {
.tooltip:hover > .text {
visibility: visible;
visibility: visible;
}
.tooltip > .text:after {
  top: 100%;
  bottom: auto;
  width: 20px;
  height: 20px;
  background: #fff;
  margin-top: -10px;
  margin-left: -10px;
  box-shadow: 1px 1px 0px #a2a9b1;
  transform: rotate(45deg);
  border-width: 0;
}
}

Latest revision as of 01:03, 15 March 2024

.tooltip {
	position: relative;
	display: inline-block;
	border-bottom: 1px dotted black;
}

.tooltip > .text {
	visibility: hidden;
	position: absolute;
    left: 0;
    bottom: calc(2px + 100%);
	z-index: 1;
	min-width: 120px;
	padding: 5px;
	background: #fff;
	box-shadow: 1px 2px 0 0 rgba(0,0,0,0.15);
    border: 1px solid #aaa;
    border-radius: 5px;
	text-align: center;
	white-space: normal;
    font-weight: normal;
    font-style: initial;
    font-size: 14px;
    line-height: 1.6;
}

.tooltip:hover > .text {
	visibility: visible;
}