Tạo hiệu ứng Tooltip giống Bootstrap khi rê chuột vào link

Anh Trai Nắng
0
Tooltip được sử dụng để cung cấp mô tả hoặc giải thích nhanh gọn về mục tiêu của liên kết hoặc đối tượng khác trên trang web.

Thủ thuật tạo hiệu ứng tooltip giống bootstrap khi rê chuột vào link giúp Blog của bạn thêm nổi bật tăng thêm phần chuyên nghiệp. Các bước thực hiện rất đơn giản chỉ một chút css và đặt hiệu ứng vào nơi muốn hiển thị và hiệu ứng có thể đặt trong <div>, <span> chứ không nhất thiết phải trong <a>.

Tạo hiệu ứng Tooltip giống Bootstrap khi rê chuột vào link

Các bước thực hiện

1. Chèn css trong <b:skin>

[data-tooltip] {
  position:relative;
  z-index:2;
  cursor:pointer;
}
[data-tooltip]:before,[data-tooltip]:after {
  visibility:hidden;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity:0;
  pointer-events:none;
}
[data-tooltip]:before {
  position:absolute;
  bottom:120%;
  left:50%;
  margin-bottom:5px;
  margin-left:-85px;
  padding:7px;
  width:160px;
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
  border-radius:3px;
  background-color:#000;
  color:#fff;
  content:attr(data-tooltip);
  text-align:center;
  font-size:13px;
  line-height:1.2;
}
[data-tooltip]:after {
  position:absolute;
  bottom:120%;
  left:50%;
  margin-left:-5px;
  width:0;
  border-top:5px solid #000;
  border-right:5px solid transparent;
  border-left:5px solid transparent;
  content:" ";
  font-size:0;
  line-height:0;
}
[data-tooltip]:hover:before,[data-tooltip]:hover:after {
  visibility:visible;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity:1;
}

2. Đặt hiệu ứng data-tooltip='' vào nơi muốn hiển thị, xem các vị dụ minh họa

+ Đặt hiệu ứng khi rê chuột vào biểu tượng FontAwesome

<span data-tooltip='Đã chia sẻ với: Mọi người'><i class='fa fa-globe'></i></span>

+ Đặt hiệu ứng khi rê chuột vào biểu tượng svg

<span data-tooltip="Đã xác minh"><svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"><path d="M24 4C12.95 4 4 12.95 4 24c0 11.04 8.95 20 20 20 11.04 0 20-8.96 20-20 0-11.05-8.96-20-20-20zm-4 30L10 24l2.83-2.83L20 28.34l15.17-15.17L38 16 20 34z"></path></svg></span>

+ Đặt hiệu ứng vào link tác giả

<a expr:href='data:post.authorProfileUrl' expr:title='data:post.author' expr:data-tooltip='data:post.author'><data:post.author/></a>

Mẹo: khi lấy dữ liệu bằng thẻ data sử dụng tham số 'expr:' đằng trước ví dụ expr:data-tooltip='data:post.author.name' cho ra html thành data-tooltip='Anh Trai Nắng - Blog Chia sẻ Thủ Thuật'

Kết luận

Hiệu ứng Tooltip giống Bootstrap khi rê chuột vào một liên kết (link) có tác dụng là hiển thị một hộp thoại nhỏ chứa thông tin bổ sung khi người dùng di chuyển con trỏ chuột vào đối tượng đó. Thông thường, Tooltip được sử dụng để cung cấp mô tả hoặc giải thích nhanh gọn về mục tiêu của liên kết hoặc đối tượng khác trên trang web.

Khi người dùng di chuyển chuột vào một liên kết, Tooltip thường xuất hiện ngay gần liên kết đó và chứa một đoạn văn bản ngắn giải thích hoặc mô tả về nội dung của liên kết đó. Điều này giúp cung cấp thông tin bổ sung mà không cần phải chuyển đến một trang mới hoặc mất quá nhiều không gian trên trang chính.

Đăng nhận xét

HƯỚNG DẪN BÌNH LUẬN

0 Nhận xét

Đăng nhận xét (0)

#buttons=(Thanks!) #days=(7)

À mình có làm website tăng tương tác MXH giá rẻ. Mọi người nếu cần thì ghé sử dụng các dịch vụ thử nha. Ghé xem dịch vụ
Ok, Go it!

HƯỚNG DẪN BÌNH LUẬN

Chèn link

Sử dụng công cụ Tạo link

Chèn hình ảnh

LINK_ANH - sử dụng công cụ upload ảnh. Và chỉ cần lấy link ảnh chèn vào bình luận là ảnh tự động hiển thị.

Định dạng chữ

<b>Chữ in đậm</b>
<i>Chữ in nghiêng</i>
<u>Chữ gạch chân</u>
<strike>Chữ gạch ngang</strike>

Chèn một đoạn Code

Đầu tiên sử dụng công cụ này để mã hóa đoạn code muốn chèn.
Sau đó dùng thẻ [code] CODE_ĐÃ_MÃ_HÓA [/code]

Khác

Nhập Email bạn hay dùng để nhận thông báo khi mình trả lời bình luận của bạn.
Vui lòng không nhập bất kỳ Liên kết Spam nào trong hộp nhận xét.
Tích vào ô "Thông báo cho tôi" để nhận thông báo nội dung phản hồi của bình luận.
Chèn emoji: Nhấn tổ hợp phím “Windows + . (dấu chấm)”

Đã hiểu