사용자의 평판에 호버링하는 것처럼 자바 스크립트없이 호버 텍스트 추가

262

stackoverflow에서 사용자의 평판을 가리키면 텍스트가 표시됩니다. 나는 이것을 여러 곳에서 보았고 소스 코드는 js없이 수행 할 수 있다고 알려줍니다. 그리고 나는 이것 만 시도했다.

 <div="text">hover me</div>

html hover

— 금연 건강 증진 협회
소스

495

title예를 들어 다음 과 같은 속성을 사용하십시오 .

<div title="them's hoverin' words">hover me</div>

또는:

<span title="them's hoverin' words">hover me</span>

— gcochard
소스

3

우리가 사용자의 평판에 떠오르면 마찬가지입니다

— Ash

1

예, 평판의 소스 코드를 보면 title 속성이로 설정되어 있음을 알 수 reputation score있습니다.

— gcochard

6

@Kevin이 솔루션은 JavaScript가 비활성화 된 브라우저에서 작동하므로 요소의 내용에 대한 힌트를 화면 판독기에 추가하므로 JavaScript 솔루션보다 실제로 좋습니다.

— gcochard

1

@KevinMeredith JS 솔루션이 더 좋을 수있는 유일한 방법은 표시되는 텍스트의 스타일을 지정할 수 없으며 기본 구현으로 만 남겨둔다는 것입니다.

— zero298

1

@David d C e Freitas :이 답변에 대한 편집으로 StackOverflow를 밝게 해주셔서 감사합니다 ... 실제로 당신을 태그하는 방법을 모르지만 잘 오

— Meredith

16

title 속성은 다른 html 요소 (예 : 링크) 와도 잘 작동합니다.

<a title="hover text" ng-href="{{getUrl()}}"> download link
</a>

— 슬라 보 미르
소스

15

종종이 상황에서 약어 html 태그에 도달합니다.

<abbr title="Hover">Text</abbr>

— 해리 보쉬
소스

7

이 요소는 특히 약어를 나타내는 데 사용하기 때문에 좋은 생각이 아닙니다. 텍스트 음성 변환 시스템에 약어로 발음하도록 지시합니다. <span>호버 텍스트 만 원하는 경우에 사용하십시오 .

— Lars Marius Garshol

8

툴팁을 찾고 있습니다

기본 툴팁의 경우 다음을 원합니다.

<div title="This is my tooltip">

더 멋진 자바 스크립트 버전의 경우 다음을 살펴볼 수 있습니다.

위의 링크는 툴팁에 대한 12 가지 옵션을 제공합니다.

— 애크
소스