CSSHTMLJquery

Danh sách bạn bè có hiệu ứng tooltip đẹp cho website

Demo: Rê chuột vào link ở Widget Bạn Bè bên Sidebar nhé.

Danh sách bạn bè có hiệu ứng tooltip đẹp cho website
Danh sách bạn bè có hiệu ứng tooltip đẹp cho website

Ở mỗi blog hay website thông thường sẽ có 1 mục để đặt liên kết, backlink đến các blog/website khác cùng hoặc khác lĩnh vực. Vị trí đặt mục này thường thấy nhất là sidebar, tiếp đó có thể là đầu hoặc dưới chân trang. Đối với mình, mình sẽ gọi tên mục này là danh sách bạn bè và hôm nay, mình sẽ share code cho các bạn cách để tạo 1 danh sách bạn bè có hiệu ứng tooltip đẹp và đơn giản nhé.

Trước khi bước vào code thì mình muốn các bạn tham khảo về cách sử dụng thuộc tính data-* nhé vì trong bài mình có sử dụng đến nó kèm 2 thuộc tính ::before và ::after mình đã nói ở bài trước rồi đó. Ngoài ra, bạn cũng cần có kiến thức cơ bản về làm web trên nền tảng Blogspot hay WordPress để biết áp dụng code ở đâu nhé. Okay giờ chúng ta bắt đầu.

Code danh sách bạn bè

HTML

<div class="friends">
    <a href="URL" data-title="Nội dung muốn hiển thị khi rê chuột vào" title="" rel="nofollow" target="_blank">Tên hiển thị</a>
</div>

Lưu ý rằng để giúp điểm SEO tăng thì bạn bắt buộc phải cho thuộc tính data-title vào cũng được. Tí ta sẽ dùng code ẩn nó đi tránh mất thẩm mĩ khi rê chuột vào sau. Còn không thích thì để trống và sẽ không cần dùng Jquery phía dưới. Sở dĩ mình không làm việc với title vì khi rê chuột vào nó sẽ hiện đồng thời tooltip lẫn nội dung title trông xấu lắm.

CSS

.friends {
  margin: 1rem 0;
}
.friends a {
  background: #fff;
  font-size: 0.8rem;
  border-radius: 50px;
  display: inline-block;
  padding: 2px 13px;
  color: #2387e0;
  position: relative;
  border: 2px solid #2387e0;
  margin: 0 1rem 1rem 0;
}
.friends a:hover {
  background: #f1f1f1;
}
.friends a[data-title]::after { /* Thêm after cho thuộc tính data-title của liên kết */
  content: attr(data-title); /* Lấy nội dung trong thuộc tính data-title */
  position: absolute;
  bottom: 0;
  left: 50%;
  opacity: 0;
  visibility: hidden;
  display: inline-block;
  width: 200px;
  margin-left: -100px; /* Bằng -(width/2) để căn giữa tooltip khi left: 50%, với right: 50% thì ngược lại là margin-right: -100px */
  background: -webkit-gradient(linear, left top, right top, from(#2387e0), to(#2f9bee));
  background: linear-gradient(to right, #2387e0, #2f9bee);
  color: #fff;
  font-size: inherit;
  border-radius: 50px;
  padding: 2px 15px;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  text-align: center;
  z-index: 9999;
}
.friends a[data-title]:hover::after {
  opacity: 1;
  visibility: visible;
  bottom: 33px;
}
.friends a[data-title]::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  opacity: 0;
  visibility: hidden;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #2387e0 transparent transparent transparent;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.friends a[data-title]:hover::before {
  opacity: 1;
  visibility: visible;
  bottom: 100%;
}

Jquery

// Loại bỏ nội dung thuộc tính title
$(".friends a").hover(function(a){$(this).attr("title","")});

Hướng dẫn chèn code

Đối với Blogspot

  • HTML: dán vào bất kì chỗ nào bạn thích. Có thể là widget (tiện ích) hay trong template ở footer chẳng hạn.
  • CSS: tất cả chèn trước ]]></b:skin>
  • Jquery: đặt trước </body> và phải lưu ý là trong template phải có thư viện Jquery trước nhé. Nếu chưa có thì thêm vào trước đoạn Jquery này nhé.

Đối với WordPress

  • HTML: tương tự như đối với Blogspot nhé.
  • CSS: để thuận tiện và tối ưu nhất thì bạn cho hết vào file css của theme nhé (mặc định đã cho style.css chẳng hạn) rồi đẩy thẳng vào functions.php
  • Jquery: tương tự như việc chèn CSS thì bạn cũng cho hết vào 1 file có đuôi .js nhé.

Lời kết

Với những bạn thích có chút thay đổi hay nói thẳng ra là màu mè như mình thì thiết nghĩ code liên kết bạn bè này là 1 lựa chọn thú vị dành cho các bạn. Qua bài này, có thể bạn đã biết thêm được về 1 thuộc tính mới là data-*. Từ đó, bạn có thể áp dụng được nó sáng tạo hơn thì sao. Hãy chia sẻ bài viết nếu bạn thấy nó có ích nhé.

Created by: PCDevShare.Com

17
Bình luận

avatar
4 Comment threads
13 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
5 Số người bình luận
Cuong NguyenTrần Nhật SinhNIỆM STYLEQuốc Bảo BlogNAD Người mới bình luận
  Đăng kí  
mới nhất cũ nhất nhiều vote nhất
Nhận thông báo từ
Quốc Bảo Blog | 22 comments
Khách
Quốc Bảo Blog | 22 comments

yeah đúng cái em đang cần ><

Quốc Bảo Blog | 22 comments
Khách
Quốc Bảo Blog | 22 comments

muốn cho nó nằm ở dưới thì sao anh

Quốc Bảo Blog | 22 comments
Khách
Quốc Bảo Blog | 22 comments

em đưa xuống rồi còn mỗi cái mũi tên là ở trên :v

Quốc Bảo Blog | 22 comments
Khách
Quốc Bảo Blog | 22 comments

em có thấy cơ mà không biết là nó ><

Trần Nhật Sinh | 11 comments
Khách
Trần Nhật Sinh | 11 comments

Nhìn đỉnh quá , e kết cái phần có thể bạn quan tâm của a rồi đó

Trần Nhật Sinh | 11 comments
Khách
Trần Nhật Sinh | 11 comments

Thích vào trang a quá, load nhanh như điện

NAD | 5 comments
Khách
NAD | 5 comments

Hay phết 😀

NIỆM STYLE | 3 comments
Khách
NIỆM STYLE | 3 comments

Tui nghĩ ông canh đều 2 cột sẽ đẹp hơn đấy!

NIỆM STYLE | 3 comments
Khách
NIỆM STYLE | 3 comments

ủa mình đổi avt trên cmt này sao ta, thấy ông NAD có ảnh kìa.