Hướng dẫn sử dụng Tooltips trong Bootstrap 3

Tooltips nó khá là khó dịch, đại khái nó là nó sẽ hiển thị nội dung trợ giúp khi bạn rê chuột vào một đối tượng nào đó trên website. Đối tượng này có thể là 1 đoạn text hay một button mà khi bạn sử dụng Tooltip trong Bootstrap thì khi rê chuột vào nó sẽ hiển thị thêm một đoạn nội dung giải thích cụ thể hơn cho người dùng về chức năng của button hay đối tượng html nào đó.

<a href="#" data-toggle="tooltip" title="Nội dung chú thích chỗ này !">Rê chuột vào xem</a>
<script>
$(document).ready(function(){
  $('[data-toggle="tooltip"]').tooltip();   
});
</script>

Ở đây chúng ta để ý các thuộc tính sau:

• data-toggle: Đây là mục dùng để khai báo trong javascript bên dưới nó. Có thể thay text tooltip bằng text khác miễn là nó có trong đoạn javascript bên dưới.
• title: Đây chính là nội dung cần hiển thị khi rê chuột vào.
• script: Đây là đoạn javascript dùng để chạy hiển thị tooltip, ở đây ta chú ý text tooltip xem có được khai báo ở trên không.

Để hiển tooltip hiển thị ở 4 vị trí: top – right – bottom – left (Trên – phải – dưới – trái) của đối tượng. Ta cần thêm vào thuộc tính data-placement

Ví dụ khi dùng lại đoạn code mẫu cơ bản trên khi thêm vào data-placement sẽ như sau:

<a href="#" data-toggle="tooltip" data-placement="top" title="Nội dung chú thích chỗ này !">Rê chuột vào xem</a>
<script>
$(document).ready(function(){
  $('[data-toggle="tooltip"]').tooltip();   
});
</script>

Ở đây Tooltips sẽ hiển thị vị trí top với data-placement=”top”. Có thể dùng 4 thuộc tính top – right – bottom – left tuỳ ý cho phù hợp với mình và đừng quên đoạn javascrip để khởi chạy nó nhé.

Ngoài ra với ví dụ việc dùng với tag a như trên bạn có thể dùng tương tự với button.