Tutorial Cách tạo một CSS Tooltip

Thảo luận trong 'HTML vs Browser' bắt đầu bởi babyinternet, 16/8/16.

By babyinternet on 16/8/16 lúc 08:48
  1. babyinternet

    babyinternet Administrator

    Tham gia ngày:
    4/7/08
    Bài viết:
    4,656
    Đã được thích:
    1,583
    Điểm thành tích:
    113
    Nơi ở:
    [}{]e[][]
    CSS Tooltip là cách đơn giản để trình bày một nội dung mà người dùng quan tâm nhưng lại không gây chiếm không gian web: chỉ khi người dùng di chuột lên văn bản hoặc hình ảnh nào đó thông tin mới hiện ra. Cách này có thể làm tăng trải nghiệm người dùng trên website bạn rất tốt. Trong bài viết này mình sẽ hướng dẫn mọi người làm một CSS Tooltip đơn giản mà không cần sử dụng đến JQuery - chúng ta chỉ cần CSS để làm điều đó. Ngoài ra, bạn có thể quyết định Tooltip sẽ hiển thị ở vị trí nào khi rê chuột lên bằng cách xác định vị trí hiển thị một cách dễ dàng.

    [​IMG]
    HTML
    Trước hết chúng ta cần đưa một đoạn mã HTML như sau:
    HTML:
    <div class="tooltip top">Hover over me
        <span class="tiptext">CSS Tooltip text</span>
    </div>
    CSS
    Để hiển thị tooltip chúng ta sử dụng đoạn mã sau:

    HTML:
    .tooltip {
        position: relative;
        display: inline-block;
        border-bottom: 1px dotted black;
    }
    .tooltip .tiptext {
        visibility: hidden;
        width: 120px;
        background-color: black;
        color: #fff;
        text-align: center;
        border-radius: 3px;
        padding: 6px 0;
        position: absolute;
        z-index: 1;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    }
    .tooltip .tiptext::after {
        content: "";
        position: absolute;
        border-width: 5px;
        border-style: solid;
    }
    .tooltip:hover .tiptext {
        visibility: visible;
    }
    Để hiển thị tooltip ở các vị trí tùy chỉnh, chúng ta thực hiện thêm một số thuộc tính nữa. Bạn hãy so sánh:

    Top Tooltip CSS:

    Mã:
    .tooltip.top .tiptext{
        margin-left: -60px;
        bottom: 150%;
        left: 50%;
    }
    .tooltip.top .tiptext::after{
        margin-left: -5px;
        top: 100%;
        left: 50%;
        border-color: #2E2E2E transparent transparent transparent;
    }
    Bottom Tooltip CSS:


    HTML:
    .tooltip.bottom .tiptext{
        margin-left: -60px;
        top: 150%;
        left: 50%;
    }
    .tooltip.bottom .tiptext::after{
        margin-left: -5px;
        bottom: 100%;
        left: 50%;
        border-color: transparent transparent #2E2E2E transparent;
    }
    Left Tooltip CSS:
    HTML:
    .tooltip.left .tiptext{
        top: -5px;
        right: 110%;
    }
    .tooltip.left .tiptext::after{
        margin-top: -5px;
        top: 50%;
        left: 100%;
        border-color: transparent transparent transparent #2E2E2E;
    }
    Right Tooltip CSS:
    HTML:
    .tooltip.right .tiptext{
        top: -5px;
        left: 110%;
    }
    .tooltip.right .tiptext::after{
        margin-top: -5px;
        top: 50%;
        right: 100%;
        border-color: transparent #2E2E2E transparent transparent;
    }
    Đơn giản chỉ cần vậy thôi là chúng ta có tooltip rồi.
    Hi vọng cái tip đơn giản này giúp ích cho nhiều bạn :D
     
    Chỉnh sửa cuối: 16/8/16
    phamtiendatvn thích bài này.

Bình luận

Thảo luận trong 'HTML vs Browser' bắt đầu bởi babyinternet, 16/8/16.

Chia sẻ trang này