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

Oleh Phạm Hoàng Nam

Pada tháng 12 26, 2018 tháng 1 16, 2019

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.

Để 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] {



Bạn có thể thích những bài đăng này
Tạo Hiệu Ứng Đẹp Với Wow.js Cho Blogspot
Tuỳ Chỉnh Định Dạng Thời Gian Bằng F12 Cho Blogspot

    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>