bootstrap tooltip plugin
Tooltip plugin
Plugin Chú giải công cụ là một hộp nhỏ bật lên, xuất hiện khi người dùng di chuyển con trỏ chuột qua một phần tử.
Cách tạo một Tooltip
Để tạo một công cụ chú giải tooltip, chúng ta thêm thuộc tính data-toggle="tooltip" vào một phần tử HTML.
Sử dụng thuộc tính title để chỉ định văn bản sẽ được hiển thị bên trong công cụ chú giải tooltip.
<a href="#" data-toggle="tooltip" title="Chú giải">Hover over me</a>
Lưu ý: Công cụ chú giải tooltip phải được khởi tạo bằng jQuery để chọn phần tử được chỉ định và gọi phương thức tooltip().
Đoạn code sau sẽ kích hoạt tất cả các công cụ chú giải tooltip trong trang web bằng jQuery.
Ví dụ
<script> $(document).ready(function(){ $('[data-toggle="tooltip"]').tooltip(); }); </script>
Ví trí hiển thị của Tooltip
Theo mặc định, công cụ chú giải sẽ xuất hiện trên đầu của phần tử HTML.
Chúng ta có thể sử dụng thuộc tính data-placement để đặt vị trí của công cụ chú giải tooltip ở trên cùng, dưới cùng, bên trái hoặc bên phải của phần tử HTML.
Ví dụ
<a href="#" data-toggle="tooltip" data-placement="top" title="Chú giải">Top</a> <a href="#" data-toggle="tooltip" data-placement="bottom" title="Chú giải">Bottom</a> <a href="#" data-toggle="tooltip" data-placement="left" title="Chú giải">Left</a> <a href="#" data-toggle="tooltip" data-placement="right" title="Chú giải">Right</a>
data-placement có giá trị là "auto", thuộc tính này sẽ cho phép trình duyệt quyết định vị trí của công cụ chú giải tooltip. Ví dụ: nếu giá trị là "auto left", thì công cụ chú giải tooltip sẽ hiển thị ở bên trái khi có thể, nếu không thì sẽ ở bên phải.