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

Rate this post