틀:툴팁2/styles.css

.tooltip-2 {
	position: relative;
	color: #0275d8;
	cursor: pointer;
	user-select: none;
}
.tooltip-2:hover {
	text-decoration: underline;
}

/* 위쪽 툴팁 */
.tooltip-2 .tooltip-top-content {
	color: #373a3c;
	font-size: 10.8pt;
	line-height: 1.5;
	user-select: text;
	visibility: hidden;
	width: 260px;
	background: white;
	border: 1px solid #ddd;
	border-radius: 3px;
	box-shadow: 0 0 2px rgba(0, 0, 0, .25);
	padding: 12px;
	position: absolute;
	bottom: 180%;
	left: 50%;
	margin-left: -130px;
}
.tooltip-2 .tooltip-top-content::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -7.5px;
	border-width: 7.5px;
	border-style: solid;
	border-color: #ddd transparent transparent transparent;
}

/* 아래쪽 툴팁 */
.tooltip-2 .tooltip-bottom-content {
	color: #373a3c;
	font-size: 10.8pt;
	line-height: 1.5;
	user-select: text;
	visibility: hidden;
	width: 260px;
	background: white;
	border: 1px solid #ddd;
	border-radius: 3px;
	box-shadow: 0 0 2px rgba(0, 0, 0, .25);
	padding: 12px;
	position: absolute;
	top: 180%;
	left: 50%;
	margin-left: -130px;
}
.tooltip-2 .tooltip-bottom-content::after {
	content: "";
	position: absolute;
	bottom: 100%;
	left: 50%;
	margin-left: -7.5px;
	border-width: 7.5px;
	border-style: solid;
	border-color: transparent transparent #ddd transparent;
}

/* 호버 기능 */
.tooltip-top-content:hover {
	cursor: auto;
}
.tooltip-2:hover .tooltip-top-content {
	visibility: visible;
}
.tooltip-bottom-content:hover {
	cursor: auto;
}
.tooltip-2:hover .tooltip-bottom-content {
	visibility: visible;
}