[Blogger] Tạo Tooltip bằng Shortcode cho blogspot

Tooltip là 1 hộp nhỏ được sử dụng để hiện thị thêm thông tin cho người đọc. Chúng có thể được sử dụng để cung cấp phụ đề cho hình ảnh, hoặc mô tả dài hơn đối với các siêu liên kết, hoặc bất kỳ thông tin hữu ích bằng cách rê chuột trên các phần tử có chứa tooltip

Demo 1 ví dụ về tooltip.

 DEMO
Tooltip giúp bạn có nhiều không gian hơn để mô tả cho các siêu liên kết đồng thời tăng tính thẩm mỹ.

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

Trước tiên bạn hãy đăng nhập vào trang quản trị blog của mình, vào phần chỉnh sửa HTML và dán đoạn code tạo tooltip sau trước thẻ đóng ]]></b:skin>

/* Tooltips */
[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à bạn đã tích hợp xong tooltips, bạn có thể chỉnh sửa css tùy theo ý thích của mình.

Để hiển thị tooltips bạn thêm thuộc tính data-tooltip vào bất cứ thẻ nào mà bạn muốn. Khi người dùng hover chuột vào liên kết, tooltip sẽ xuất hiện

Chúc bạn thành công !