Thêm văn bản di chuột mà không có javascript như chúng tôi di chuột vào danh tiếng của người dùng

262

Trong stackoverflow, khi chúng ta di chuột vào danh tiếng của người dùng, chúng ta sẽ thấy một văn bản. Tôi đã thấy điều này ở nhiều nơi và mã nguồn cho tôi biết rằng nó có thể được thực hiện mà không cần js. Và tôi đã thử và chỉ có điều này-

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

html hover

— Tro
nguồn

495

Sử dụng titlethuộc tính, ví dụ:

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

Mở rộng đoạn trích

hoặc là:

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

Mở rộng đoạn trích

— gcochard
nguồn

3

giống như khi chúng ta di chuột vào danh tiếng của người dùng

— Ash

1

Có, nếu bạn xem mã nguồn cho danh tiếng, bạn sẽ thấy thuộc tính tiêu đề được đặt thành reputation score.

— gcochard

6

@Kevin Giải pháp này thực tế tốt hơn giải pháp JavaScript vì nó sẽ hoạt động trên các trình duyệt bị tắt JavaScript và nó cũng thêm một gợi ý để trình đọc màn hình về nội dung của phần tử.

— gcochard

1

@KevinMeredith Tôi sẽ nói rằng biện pháp duy nhất mà giải pháp JS sẽ tốt hơn là bạn không thể định kiểu văn bản xuất hiện và chỉ còn lại với triển khai gốc.

— zero298

1

@David d C e Freitas: cảm ơn bạn đã làm sáng tỏ StackOverflow với chỉnh sửa của bạn cho câu trả lời này ... không biết làm thế nào để thực sự gắn thẻ bạn nhưng ồ tốt

— Meredith

16

Thuộc tính title cũng hoạt động tốt với các thành phần html khác, ví dụ: liên kết ...

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

— Slavomir
nguồn

15

Tôi thường đạt được thẻ html viết tắt trong tình huống này.

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

https://www.w3schools.com/tags/tag_abbr.asp

— Harry Bosh
nguồn

7

Yếu tố đó đặc biệt có nghĩa là được sử dụng để chỉ các chữ viết tắt, vì vậy đây không phải là một ý tưởng tốt. Bạn đang nói với các hệ thống chuyển văn bản thành giọng nói để phát âm nó như một từ viết tắt. Sử dụng <span>nếu bạn chỉ muốn một văn bản di chuột.

— Lars Marius Garshol

8

Bạn đang tìm kiếm tooltip

Đối với tooltip cơ bản, bạn muốn:

<div title="This is my tooltip">

Đối với phiên bản javascript fancier, bạn có thể xem xét:

http://www.designer-d Daily.com/jquery-prototype-mootool-tooltips-12632

Liên kết trên cung cấp cho bạn 12 tùy chọn cho chú giải công cụ.

— Abk
nguồn