/ 2 nhận xét

Tạo chú thích khi rê chuột (tooltip) bằng shortcode

Tooltip là một hộp chú thích nhỏ được dùng để hiển thị thêm thông tin cho người đọc, chúng ta sử dụng để cung cấp phụ đề cho hình ảnh, hoặc mô tả cho các liên kết, các điểm cần nhấn mạnh hay chú ý trong văn bản.
Tooltip Css

Chúng ta có thể xem demo trực tiếp
DEMO

Bài viết này giúp bạn tạo cho mình tooltip từ shortcode có thể thêm trực tiếp vào thẻ a như một thuộc tính (tương tự như href, title....) mà không cần cài thêm plugin hoặc nhúng bootstrap, ảnh hưởng đến tốc độ tải trang của bạn
Cách thực hiện:
Trước tiên bạn đăng nhập trang quản trị blogger > chỉnh sửa HTML > dán đoạn CSS tạo tooltip sau trước thẻ đóng ]]></b:skin>
[data-tooltip]{position:relative}
[data-tooltip]:before{content:'';visibility:hidden;opacity:0;border:5px solid #000;border-top-color:#000;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;position:absolute;top:-7px;left:10px;z-index:8;font-size:0;line-height:0;width:0;height:0;-webkit-transition:opacity 0.2s;-moz-transition:opacity 0.2s;-o-transition:opacity 0.2s;transition:opacity 0.2s}
[data-tooltip]:after{visibility:hidden;opacity:0;content:attr(data-tooltip);position:absolute;top:-35px;left:0;padding:0 0.5em;background:#000;color:#fff;z-index:9;font-size:13px;height:28px;line-height:28px;white-space:nowrap;word-wrap:normal;-webkit-transition:opacity 0.2s;-moz-transition:opacity 0.2s;-o-transition:opacity 0.2s;transition:opacity 0.2s}
[data-tooltip]:hover:before,[data-tooltip]:hover:after{visibility:visible;opacity:1}

Lưu mẫu lại là xong.
Cú pháp sử dụng: thêm data-tooltip='mô tả' bên trong bất cứ thẻ nào
Ví dụ: <a href='#' data-tooltip='mô tả'>Tooltips</a>
Chú ý: 
 1. các bạn có thể thay toàn bộ chữ data-tooltip thành cái khác nếu bạn thích, ví dụ mình thích đánh dấu chủ quyền của mình thì mình sẽ sửa thành data-khoirom. Nhớ là chỉnh sửa hết nhé đừng thiếu chỗ nào.
 2. Nếu tooltip không hoạt động là do css nằm bên ngoài thẻ bao bọc đã chặn hiển thị, bạn thử tìm và xóa (đa phần là do css position:relativeoverflow:hidden của thẻ bao bọc ngoài)

Chúc các bạn thành công. Đừng quên để lại nhận xét bên dưới nhé. Đừng lướt qua như người dưng!
Gửi bài hoặc câu hỏi về thienlong433@gmail.com

Ý kiến bạn đọc (2)

  1. CSS rất hay.
    À em thử nghiên cứu thủ thuật "tạo 1 trang liệt kê tất cả comments trên blog" em nhé!

    Trả lờiXóa

Hình ảnh chủ đề của Mae Burke