Sử dụng Tooltips với Pure CSS – Hint.css

hintcss-w550
Share Button

Hint.css là một thư viện tooltip trong CSS giúp bạn có thêm những lựa chọn về tooltips cho trang của bạn. Sự khác biệt lớn giữa Hint.css và plugin tooltip khác là Hint.css sử dụng thuộc tính data-*, và thuộc tính class để hiển thị vị trí tooltips. Nó chỉ tương thích với những trình duyệt hiện đại, hỗ trợ đầy đủ HTML5 và CSS3.

Cách sử dụng:

1. Hãy thêm Hint.css vào trang web của bạn:

<link rel="stylesheet" href="hint.css">

2. Đánh dấu phần tử mà bạn muốn thêm Tooltips. Sử dụng thuộc tính data-hint để hiển thị nội dung Tooltip.

<p> <a href="#" class="hint  hint--top" data-hint="jQueryScript.Net">Look, there is something over me.</a> </p>

3. Các lựa chọn vị trí.

class="hint hint--top"
class="hint hint--bottom"
class="hint hint--left"
class="hint hint--right"

4. Ngoài ra bạn có thể sử dụng các class khác để hiển thị Tooltips theo cách của bạn.

hint--error
hint--info
hint--warning
hint--success
hint--always

Plugin này được phát triển bởi Chinchang

Trả lời

Thư điện tử của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *