Cách Tạo Hiệu Ứng Tooltip Khi Hover Cho Blogspot

Đặng Tiến Sĩ Tác giả:
Xuất bản: Thứ Năm, 27 tháng 12, 2018 -

Tooltip là một chú thích xuất hiện khi rê chuột lên 1 đối tượng nào đó như văn bản, hình ảnh, liên kết và các phần tử giao diện khác. Nội dung trong tooltip có thể là văn bản, hình ảnh hoặc thông tin nào đó. Mục đích của tooltip là nói cho người dùng biết đối tượng này dùng để làm gì hoặc hiển thị thêm thông tin của đối tượng được rê chuột vào. Chúng ra rất dễ dàng thấy ứng dụng này trên các site thương mại điện tử. Tooltip thường hiển thị thêm các thông tin về hình ảnh, thông số kỹ thuật, giá cả của sản phẩm mà bạn đang xem. Ưu điểm lớn nhất của tooltip không chỉ là hiển thị được thêm nhiều thông tin của đối tượng mà còn tiết kiệm được diện tích trên giao diện. Chúng ta hãy cùng đi tìm hiểu cách tạo tooltip nào.

Tooltip, Tạo Hiệu Ứng Tooltip, Bootstrap Tooltip, Cách Tạo Hiệu Ứng Tooltip Khi Hover Cho Blogspot

Để tạo được tooltip thì các bạn hãy làm theo mình hướng dẫn nhé.

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


Đăng nhập Blogger rồi chọn vào Mẫu sau đó chọn Chỉnh sửa HTML, sau đó thêm đoạn css này vào trước thẻ đóng ]]></b:skin>
[data-tooltip] {
    position: relative;
    z-index: 9;
    display: inline-table;
}
[data-tooltip]:before {
 position: absolute;
    bottom: 100%;
    left: 50%;
    margin-bottom: 5px;
    margin-left: -57px;
    padding: 4px 7px;
    width: 100px;
    border-radius: 4px;
    background-color: #000;
    color: #fff;
    content: attr(data-tooltip);
    text-align: center;
    font-size: 12px;
    line-height: 1.4;
}
[data-tooltip]:after {
    position: absolute;
    bottom: 100%;
    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]:before, [data-tooltip]:after {
    visibility: hidden;
    opacity: 0;
}
[data-tooltip]:hover:before, [data-tooltip]:hover:after {
    visibility: visible;
    filter: alpha(opacity=90);
    opacity: .9;
}
[data-tooltip-bottom] {
    position: relative;
    z-index: 9;
    display: inline-table;
}
[data-tooltip-bottom]:before {
 position: absolute;
    top: 100%;
    left: 50%;
    margin-top: 5px;
    margin-left: -57px;
    padding: 4px 7px;
    width: 100px;
    border-radius: 4px;
    background-color: #000;
    color: #fff;
    content: attr(data-tooltip-bottom);
    text-align: center;
    font-size: 12px;
    line-height: 1.4;
}
[data-tooltip-bottom]:after {
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    width: 0;
    border-bottom: 5px solid #000;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    content: " ";
    font-size: 0;
    line-height: 0;
}
[data-tooltip-bottom]:before, [data-tooltip-bottom]:after {
    visibility: hidden;
    opacity: 0;
}
[data-tooltip-bottom]:hover:before, [data-tooltip-bottom]:hover:after {
    visibility: visible;
    filter: alpha(opacity=90);
    opacity: .9;
}

Cách sử dụng


Bạn chỉ cần thêm thuộc tính
data-tooltip='nội dung hiện thị' hoặc data-tooltip-bottom='nội dung hiện thị'
vào 1 phần tử bất kỳ
<a data-tooltip='nội dung hiện thị' href='javascript:void(0);'>Tooltip</a>
<!--hoặc-->
<a data-tooltip-bottom='nội dung hiện thị' href='javascript:void(0);'>Tooltip-Bottom</a>

Demo


Tooltip          Tooltip-Bottom

Lời kết


Tooltip bằng css sẽ không tốt bằng nếu thêm jquery vào. Nhưng Tooltip bằng css rất nhẹ và đơn giãn làm.

Tag:
0 Like
16 Comment More Emoticon
16 Nhận xét
Sắp xếp theo

  1. góp ý:blog nên để page navication thay vì auto loadmore hoặc là lôi cái widget liên kết lên sidebar chứ để v ở trang chủ chả ai thấy dc liên kết :Vv

    Trả lờiXóa
  2. đã lk cho anh nha anh sĩ check xong lk lại hộ em với
    https://riusdesigner.blogspot.com/
    Rius Blogger

    Trả lờiXóa
  3. blog đẹp mà thấy hơi lag cậu ạ :D

    Trả lờiXóa
    Trả lời
    1. tui fix lag lắm lun r , mà sao chú vẫn thí lag nhỉ ??????

      Xóa
    2. giảm thiểu tải feed đi nha chú :v

      Xóa
    3. tại cái js của blog á ! tui mới xoá dc rùi , với lại dou có nhìu feed dou

      Xóa

Bài Viết Có Thể Xem

THÔNG BÁO

Biên tập nội dung: Đặng Tiến Sĩ
Sĩ Ben IT Blogger giữ bản quyền nội dung trên website này
Chỉ được phát hành lại nội dung khi có sự đồng ý của chủ sở hữu
Mọi thư từ góp ý vui lòng gửi về địa chỉ dangtiensi.vn@gmail.com

Đóng Liên hệ

Thông báo của Admin