Chuyên mục

Blogger
  • Blogger Template 8
    • Seo Blogspot 29
      • Thiết kế Blogspot 24
        • Thủ thuật Blogspot 69
          • Tiện ích Blogspot 31
            Máy tính
            • Phần mềm 45
              • Sửa lỗi Windows 20
                • Thủ thuật Windows 78
                  • Cài đặt Windows 41

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

                    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>. Các bước thực hiện như sau:

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

                    Copy
                    [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

                    Copy
                    <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

                    Copy
                    <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ả

                    Copy
                    <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' cho ra html thành data-tooltip='Việt Blogger'

                    Chấm hết bài!!!
                    Nội dung chính