CSS 툴팁은 전체 텍스트가 아닌 한 단어를 강조 표시합니다.

세르지오 트라 자노

아래 코드에서 툴팁은 그와 관련된 전체 텍스트를 강조 표시합니다. "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 에서 추출되었습니다.

VXp

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] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

jQuery는 전체 테이블이 아닌 테이블의 개별 열 텍스트를 강조 표시합니다.

전체 범위가 아닌 단어별로 테이블의 텍스트 강조 표시

css 드롭 다운 하위 메뉴 마우스가 전체 하위 메뉴 모음이 아닌 텍스트 만 강조 표시

전체 요소와 패딩이 아닌 마우스를 올려 놓을 때 요소 내의 텍스트를 강조 표시하려면 어떻게해야합니까? CSS / HTML

한 번에 한 행만 강조 표시하고 CSS 클래스를 전환합니다.

AngularJS-텍스트의 일부를 강조 표시하면 영어가 아닌 언어에서 단어가 깨집니다.

codenameone은 단일 노드가 아닌 전체 json 응답 메시지를 표시합니다.

텍스트를 강조 표시하려면 어떤 CSS가 필요합니까?

Plotly Text Annotation은 전체에 동일한 텍스트를 표시합니다.

모든 자녀가 아닌 목록의 부모를 강조 표시합니다.

replace() 문자가 아닌 전체 단어를 제거합니다.

RichTextBox에 더 많은 텍스트를 추가하고 강조 표시하면 이전 강조 표시가 모두 지워집니다.

CSS로 툴팁에 작은 아래쪽 화살표 추가

css를 사용하여 줄임표가있는 단축 인 동일한 텍스트를 사용하여 호버 툴팁에 표시하려면 어떻게해야합니까?

사용자가 강조 표시 한 텍스트를 유지하고 다른 곳을 클릭 할 때 강조 표시하려면 어떻게해야합니까?

부트 스트랩 툴팁은 한 줄에 있어야합니다.

처음 3 개의 문자가 유효한 경우 전체 단어를 강조 표시

Google App Scripts는 선택한 텍스트를 강조 표시합니다.

호버로 강조 표시된 텍스트에 적합한 CSS

객체가있는 Array.prototype.fill ()은 새 인스턴스가 아닌 참조를 전달합니다.

Google 번역 확장 프로그램은 텍스트가 강조 표시될 때 아이콘 이미지를 어떻게 표시합니까?

선택한 단어를 대체 한 단어를 강조 표시하려면 어떻게합니까?

Android 축소 도구 모음 : 부분적으로가 아닌 전체 텍스트를 표시하도록 텍스트 크기를 조정하는 방법

Xcode 메모리 그래프는 메모리 사이클이 아닌 강력한 참조에 대한 스마트 시각적 표시기를 제공합니까?

한 열에 특정 단어가 포함 된 경우 전체 행을 강조 표시하는 방법은 무엇입니까?

Eclipse는 툴팁에 불완전한 링크를 표시합니다.

CSS를 사용하여 전체 요소의 너비가 아닌 텍스트 너비의 배경색을 어떻게 설정합니까?

툴팁은 앵커 태그에 대한 td 요소를 표시합니다.

Spring에서 전체 이름이 아닌 이름에서 한 단어를 찾는 방법은 무엇입니까?

TOP 리스트

뜨겁다태그

보관