아래 코드에서 툴팁은 그와 관련된 전체 텍스트를 강조 표시합니다. "over"라는 단어 만 강조 표시하려면 어떻게해야합니까?
body {text-align: center}
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
bottom: 100%;
left: 50%;
margin-left: -60px;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
<h2>Top Tooltip</h2>
<p>Move the mouse over the text below:</p>
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
위의 코드는 https://www.w3schools.com/css/tryit.asp?filename=trycss_tooltip_top 에서 추출되었습니다.
HTML을 약간 변경하면됩니다.
body {text-align: center}
.tooltip {
position: relative;
/*display: inline-block; not necessary*/
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
bottom: 100%;
left: 50%;
margin-left: -60px;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
<h2>Top Tooltip</h2>
<p>Move the mouse over the text below:</p>
<div>Hover <span class="tooltip">over<span class="tooltiptext">Tooltip text</span></span> me
</div>
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다