30 Stylish jQuery Tooltip Plugins For Catchy Designs

Tooltips on website are small things which can play a big role in website design. If a tooltip on your website is very well made and looks amazing then it can lift up visitors impression about your website. And that’s why here comes jQuery to help with its well made tooltips. And remember that all those small website design things make your website look better.
So this time I will show you my Top 30 of jQuery tooltip plugins. Enjoy!

Clear và Float

 

Clear và Float là kỹ thuật dùng rất nhiều trong thiết kế giao diện bằng CSS với hai tính năng cùng tên là Clear và Float. Float dùng để tách một thành phần bất kỳ khỏi cách hiển thị thông thường của nó để tạo chỗ cho những thành phần ở sau di chuyển lên và phủ đầy chỗ trống nếu có. Clear dùng để ngăn không cho thành phần ở dưới di chuyển lên trên đề lấp vào chỗ trống.

Ví dụ bạn có 2 đoạn văn bản, bạn chỉ muốn đoạn văn thứ nhất bao quanh hình ảnh và đoạn văn thứ hai thì vẫn nằm ở dưới. Theo luật trên thì cữ có chỗ là đoạn văn thứ 2 cũng sẽ tràn lên để lấp chỗ trống. Nếu bạn không muốn điều này xảy ra bạn có thể sử dụng Clear để nó không tràn lên được.

1. Float

Float chủ yếu dùng để căn chỉnh hình ảnh sao cho chữ sẽ bao quanh hình ảnh. Nhưng nó cũng được áp dụng nhiều trong việc thiết kế giao diện sử dụng CSS. Ở ví dụ dưới đây sẽ bao gồm một hình logo của izwebz và một đoạn văn bản. Tôi sẽ cho hình được float: left và đoạn văn bản được giữ nguyên.

img {float: left;}

Để tạo được hiệu ứng này bạn cần có một thẻ <img> và <p>

<div id='bao_quanh'>
<img src="images/ball.png" alt="ball" />
   <h3>Box Model</h3>
  <p>Tạo thẻ div bao quanh là cách để bạn quản lý độ rộng thực
sự của box. cho dù khi tôi thêm giá trị padding bằng 5px vào
mỗi bên trái phải, nó cũng không làm tăng độ lớn. Mà ngược lại,
nó sẽ bị đầy lùi vào biên là 5px .</p>
</div><!--End #bao_quanh-->

Tóm lại khi bạn cho tấm hình float: left bạn khiến nó bị dịch chuyển sang phía tận cùng bên trái (hoặc phải nếu float: right) so với thẻ mẹ của nó là div id=”bao_quanh”. Đoạn văn bản cũng sẽ di chuyển tương tự so với thẻ mẹ của nó, do đó tạo ra hiệu ứng bao quanh lấy hình ảnh. Cho nên nếu bây giờ bạn không muốn chữ bao quanh hình nữa mà muốn nó tạo ra 2 cột song song với nhau, bạn chỉ cần tăng giá trị margin-left cho đoặn văn thành 150px.

 {margin-left: 150px;background: #faf3c7;}
img {float: left;}

Khi bạn cho tấm hình float sang bên trái và đoạn văn bản có lề trái bằng với độ lớn của tấm hình, thì hiệu ứng bao xung quanh hình sẽ mất đi mà thay vào đó bạn được 2 cột song song với nhau. Đây là nguyên lý cơ bản nhất để tạo ra giao diện có nhiều cột sử dụng float. Miễn là mỗi thành phần khi được float đều có một giá trị độ rộng nhất định thì nó sẽ xếp song song với nhau và tạo ra cột (nếu diện tích đủ rộng). Nếu bạn làm như vậy với 3 thẻ <div> float: left và có độ rộng nhất định, bạn sẽ được 3 cột song song. Sau đó bạn có thể thêm các thành phần vào từng cột để tạo nên giao diện.

 

2. Clear

Luôn đi chung với Float là Clear. Clear thực chất chỉ là một tính năng chống không cho đoạn văn ở dưới tràn lên trên để lấp vào chỗ trống. Như đã nói ở trên, khi bạn dùng float bạn có thể tạo ra hiệu ứng chữ bao xung quanh hình. Nhưng đôi khi vì dư chỗ, cho nên đoạn văn ở dưới di chuyển lên trên và lấp vào chỗ trống. Tất nhiên đó không phải là điều bạn muốn, do vậy bạn cần sử dụng Clear để “dọn sạch” nó đi.

Ở ví dụ dưới đây tôi có 2 đoạn văn và 2 tấm hình. Nếu bạn cho tất cả các thành phần đều float: left bạn sẽ thấy nó bị như hình dưới đây.

Lý do là vì tất cả các thành phần đều được float: left do vậy hình và đoạn văn ở dưới nó sẽ cố phủ đầy chỗ trống mà tấm hình và đoạn văn thứ nhất để lại khi bị float: left. Và cũng chính vì lẽ đó mà tạo ra hiệu ứng ta không mong đợi. Có nhiều cách xử lý vấn đề này, tôi sẽ hướng dẫn bạn cụ thể hơn trong video tutorial về Clear và Float. Còn bây giờ đây là cách phổ biến nhất và cũng gây ra nhiều tranh cãi nhất.

Để đạt được mục đích sao cho tấm hình và đoạn văn thứ 2 “ngoan ngoãn” chịu chui xuống dưới, chúng ta sẽ thêm một thẻ div trống vào dưới đoạn văn thứ nhất.

<div id='bao_quanh'>
<img src="images/ball.png" alt="ball" />
   <h3>Clear và Float</h3>
  <p><!--Nội dung bị cắt ngắn --></p>

<div></div><!-- Thẻ div trống với-->

<img src="images/ball.png" alt="ball" />
   <p><!--Nội dung bị cắt ngắn --></p>
</div><!--End #bao_quanh-->

Sau đó ở trong CSS, bạn chỉ việc thêm đoạn code sau:

.clear {clear: both;}

Với một thẻ <div> và một class dùng để clear, bây giờ thì nó sẽ xuất hiện như ý rồi

Sở dĩ biện pháp này gây tranh cãi là vì chúng ta thêm một thành phần không phải là nội dung vào phần nội dung cốt để đạt được mục đích. Điều này đi ngược lại với nguyên lý của CSS là tách rời nội dung khỏi cách trình bày. Cho nên nếu bạn không muốn có một thẻ div trống trong code HTML của mình bạn cũng có thể làm theo cách dưới đây.

Sử dụng clearfix

Bạn copy đoạn code sau và cho vào stylesheet

.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
    }
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

Bây giờ nếu bạn muốn clear nó thì bạn không phải tạo một thẻ div trống nữa mà chỉ việc khai báo class=”clearfix” vào thẻ mẹ chưa các thành phần float. Trong ví dụ ở trên bạn thêm vào phần sau

<div id="bao_quanh">

Với cách này bạn không cần phải thêm một thẻ div nữa mà vẫn hiện ngon lành. Cho đến bây giờ cách này cũng rất phổ biến vì nó hiển thị tốt trên mọi trình duyệt.

Pseudo Class

Pseudo (phát âm là: sju:dou) tiếng Việt có nghĩa là “giả, không thật”, sở dĩ nó được đặt tên là Pseudo Class hay gọi là “Class giả” là vì nó không được gắn liền với những thẻ XHTML như những class thông thường bạn đã biết ở bài trước. Một thành phần rất quan trọng trong mọi website chính là liên kết. Cũng như một đối tượng văn bản thông thường, chúng ta hoàn toàn có thể áp dụng các thuộc tính định dạng đã học ở 2 bài trước như định font chữ, gạch chân, màu chữ,… cho một liên kết. Hơn nữa, CSS còn cung cấp một điều khiển đặc biệt được gọi là pseudo- classes. Pseudo-classes cho phép bạn xác định các hiệu ứng định dạng cho một đối tượng liên kết ở một trạng thái xác định như khi liên kết chưa được thăm (a:link), khi rê chuột lên liên kết (a:hover), khi liên kết được thăm (a:visited) hay khi liên kết đang được kích hoạt – đang giữ nhấn chuột (a:active). Với điều khiển pseudo- classes cùng với các thuộc tính CSS đã học chắc chắn sẽ mang lại rất nhiều ý tưởng về trang trí liên kết cho trang web.

Pseudo Class cho đường liên kết

Pseudo Class được sử dụng nhiều nhất với các đường liên kết (thẻ <a>) để tạo ra hiệu ứng thay đổi trạng thái chữ mỗi khi người dùng di chuột qua nó ví dụ như những đường liên kết trên izwebz, khi bạn di chuột qua sẽ có màu nền là màu xanh nhạt.

Có tất cả 4 trạng thái của đường liên kết

  • Link: đơn thuần là đường liên kết để báo cho người đọc biết nó là đường liên kết.
  • Visited: Người đọc đã từng nhấp chuột vào link này rồi.
  • Hover: Người đọc di chuột qua đường liên kết
  • Active: Đường liên kết đang được người đọc nhấp chuột.

Tương đương với 4 Pseudo Class.

  • a:link {color:blue;}
  • a:visited {color:gray;}
  • a:hover {color:red; text-decoration:none;}
  • a:active {color:navy;}

Bây giờ hãy tạm gác chuyện màu nào hay hiệu ứng nào thì thích hợp cho đường liên kết lại, chúng ta hãy xem đoạn code trên ảnh hưởng tới đường liên kết như thế nào. Đoạn code trên định nghĩa đường liên kết lúc:

  • Bình thường sẽ có màu xanh và gạch chân là giá trị mặc định.
  • Đường liên kết đã được người dùng nhấp vào, nó sẽ có màu xám.
  • Người dùng di chuột lên (chưa nhấp) nó sẽ có màu đỏ và không có gạch chân
  • Người dùng chỉ nhấp và giữ chuột nó sẽ có màu xanh đậm (ít khi xảy ra)

Trên đây chỉ là những hiệu ứng cơ bản nhất của Pseudo Class cho đường liên kết. Sau này bạn có thể sử dụng Pseudo Class như là 1 dạng Contextual Selector để hướng tới những đối tượng cụ thể và tạo ra những hiệu ứng khác nhau cho các đường link ở những phần khác nhau như thanh di chuyển, footer, liên kết bạn bè …

Trong 4 trạng thái trên thì bạn không nhất thiết phải khai báo cả 4 trạng thái. Thường thì người ta chỉ khai báo 2 trạng thái chủ yếu là :link và :hover. Còn :visited và :active thì cũng không thực sự cần thiết lắm. Trình duyệt sẽ bỏ qua những trạng thái không được khai báo.

Lưu ý: Tuy nhiên để có hiệu ứng Rollover, bạn phải khai báo :hover sau :link hoặc :visited. Hoặc bạn có thể nhớ theo kiểu LoVe Hate

Pseudo Class còn có thể được áp dụng cho bất cứ thành phần nào để tạo hiệu ứng Rollover chứ không chỉ với các đường liên kết. Ví dụ

h1:hover {background-color:green;}

Lưu ý: IE6 không hỗ trợ Pseudo Class ở những thành phần khác ngoại trừ đường liên kết. IE7 có hỗ trợ Pseudo Class nhưng bạn phải khai báo là Strict DOCTYPE thì nó mới hoạt động.

First Child

x:first-child

Tính năng này dùng để hướng đối tượng là con “trưởng” của một thành phần “đông con”, nơi x là con đầu

Ví dụ:

.vi_du em:first-child {color:red;}

với code xhtml như sau

Tính năng này chủ yếu dùng để hướng đối tượng

Ở đoạn code trên thì hai thẻ <em> đều là con của thẻ <p> nhưng thẻ <em> đứng trước là con đầu, cho nên nó bị ảnh hưởng bới luật trên và kết quả bạn sẽ có

Tính năng này chủ yếu dùng để hướng đối tượng

Pseudo Elements

Pseudo Elements cho phép bạn tạo ra những hiệu ứng đặc biệt mà bạn không cần phải thêm markup vào code.

x:first-letter ở đó x là tên thẻ bị ảnh hưởng

p:first-letter {font-size:300%;}

Với markup tương ứng

<p>Trên đây chỉ là những hiệu ứng cơ bản nhất của Pseudo Class cho đường liên kết.</p>

x:first-line <– nơi x là tên thẻ bị ảnh hưởng

p:first-line {font-variation:small-caps;}

Cái hay của dòng code này là nếu cửa sổ trình duyệt lơn thì bất cứ chữ nào nằm vừa dòng đầu tiên sẽ bị IN HOA như hình trên. Nếu cửa sổ bé hơn, nó sẽ đẩy chữ xuống dưới và những chữ còn lại vẫn sẽ được IN HOA.

Class và ID

Cho đến bây giờ bạn đã thấy được CSS có thể thay đổi các đối tượng html như thế nào. Ví dụ khi bạn viết code CSS cho thẻ h1 hoặc p, thì bạn sẽ thấy nó được áp dụng cho tất cả các thẻ trong html. Nhưng không phải lúc nào bạn cũng muốn tất cả các thẻ p trong phần code của bạn đều bị ảnh hưởng. Có thể bạn muốn đoạn này chữ màu xanh, đoạn kia chữ màu đỏ và đậm. Chính vì thế Class và ID được thêm vào thẻ html để bạn có thể hướng tới một đối tượng cụ thể hơn trong code HTML của bạn. Do đó cho bạn thêm một lựa chọn nữa để thiết kế trang web.

Cách sử dụng Class

Dưới đây là đoạn code chỉ cho bạn thấy cách sử dụng class

<h1>Đoạn văn này có cùng class với đoạn văn thứ 3</h1>
<p>Đoạn văn bản này xuất hiện bình thường</p>
<p> Khi chúng ta gắn class cho thẻ html
chúng ta có thể  hướng tới đối tượng dễ dàng hơn cho dù
nó có ở cấp bậc nào đi chăng nữa</p>

Ở đoạn code trên bạn thấy sự xuất hiện của class=”classtext”, đây chính là class mà tôi thêm vào cho thẻ h1 và thẻ p. Bây giờ chúng ta sẽ tô đậm nó

p {font-family: helvetica; sans-serif;}
.classtext {font-weight: bold;}

Lưu ý: đoạn code trên bạn phải chèn vào phần head của tài liệu vì ở đây chúng ta sử dụng phương pháp nhúng CSS vào trong phần đầu của tài liệu HTML.

Kết quả là 2 đoạn văn bản có thẻ p sẽ được hiển thị với font Helvetica (hoặc nếu máy của bạn không có font này, nó sẽ cho hiển thị dòng font San Serif) nhưng đoạn văn có class=”classtext” sẽ được hiển thị vừa font Helvetica và in đậm. Đoạn văn bản nằm trong thẻ h1 thì có font là font mặc định của trình duyệt, nhưng nó cũng được in đậm bởi vì nó bị gắn với class=”classtext”. Thẻ span là cặp thẻ trắng sẽ không gây tác động gì cho đối tượng nằm trong nó vì chúng ta chưa định dạng gì cho nó hết.

Contextual Class Selector

Nếu bây giờ bạn chỉ muốn đoạn văn bản cuối cùng có màu đỏ thì phải làm sao? Bởi vì nếu bạn thêm

.classtext {font-weight:bold; color:red'}

thì đoạn văn bản nằm trong thẻ h1 cũng sẽ có màu đỏ và như thế không phải điều bạn muốn. Do vậy bạn có thể kết hợp thẻ đối tượng và tên class vào để tạo thành Selector.

p {font-family: helvetica; sans-serif;}
.classtext {font-weight: bold;}
p.classtext {color:red;}

như thế thì chỉ có đoạn văn bản thứ 3 là sẽ có màu đỏ hoặc bạn có thể làm cho 4 chữ chúng ta có thể được in nghiêng bằng cách sử dụng kết hợp

p.classtext span {font-style:italic;}

nếu bạn muốn bạn cũng có thể làm cho chữ cùng class nằm trong thẻ h1 in nghiêng bằng cách viết

.classtext span {font-style:italic;}

Tránh lạm dụng Class

Một trong những lỗi phổ biến nhất của những người mới bắt tay vào CSS là sử dụng quá nhiều class. Họ dùng class cho hầu hết các thẻ HTML và khai báo CSS cho từng class một. Làm như vậy thì cũng chẳng khác gì sử dụng thẻ HTML cả, vì nó cũng khó quản lý và thay đổi cũng rất khó khăn.

Cách sử dụng Class đúng cách là cho thẻ div bao quanh toàn bộ phần code mà bạn muốn hướng tới. Nếu bạn muốn hướng tới đối tượng nào nằm trong class đó, bạn luôn có thể kết hợp với phương pháp Contextual Class Selector để hướng tới nó.

Cách sử dụng IDs

ID được viết giống y như khi bạn viết code cho Class, chỉ có khác một điểm là bạn dùng ký hiệu dấu thăng (#) để thay cho dấu chấm . Nếu một đoạn văn bản được viết như sau

 Đây là đoạn văn bản bất kỳ

thì trong phần CSS code của nó sẽ như sau

p#classtext {color:red;}

Sự khác biệt giữa Class và ID

Nói ngắn gọn thì ID là duy nhất và Class được sử dụng nhiều lần. Ví dụ trên trang web các thành phần duy nhất như là Logo, Menu, Footer … những cái này nó chỉ xuất hiện một lần duy nhất trên trang chứ nó không lặp đi lặp lại trên cùng một trang. Còn khi sử dụng Class thì áp dụng cho những thành phần xuất hiện nhiều lần trên cùng một trang.

Ví dụ bạn thấy ở trên izwebz thì mỗi một bài post đều được định dạng giống hệt nhau và nó xuất hiện 10 lần trên một trang vì có 10 bài post trên một trang. Nếu bạn đặt ID cho từng post một thì bạn phải định dạng từng post một trong CSS. Còn nếu bạn đặt cho chúng có cùng class thì bạn chỉ việc định dạng một lần cho tất cả.

Một điểm khác biệt thứ 2 nữa đó là Class không phân biệt IN HOA hay in thường nhưng ID lại phân biệt IN HOA và in thường. Ví dụ id=”containerWraper” khác với id=”containerwraper”

Cuối cùng bạn có thể sử dụng nhiều class cho cùng một thành phần nhưng chỉ có duy nhất một ID. Ví dụ bạn có thể đặt class như dưới đây và các class này hoàn toàn độc lập với nhau.