IMG-LOGO
× 01. Hướng dẫn cài đặt bootstrap + jquery - học lập trình bằng bootstrap+ Jquery 02. Học bootstrap qua ví dụ 2- Bootstrap 03. Học bootstrap qua ví dụ 3 - Bootstrap 04. Thao tác lên tags html bằng jquery - Bootstrap 05. Xử lý sự kiện trong jquery (events in jquery) - Bootstrap 06. Viết trang web quản lý sinh viên bằng jquey + bootstrap phần 1 07. Viết trang web quản lý sinh viên bằng jquey + bootstrap phần 2 08. Hướng dẫn học bootstrap qua ví dụ dự án web đồng hồ - bootstrap




Bootstrap 4 Tooltip

by GokiSoft.Com - 19:27 12/10/2020 3,352 Lượt Xem

Bootstrap 4 Tooltip

Tooltip là hộp thông báo nhỏ xuất hiện cạnh phần tử khi người dùng hover qua phần tử đó:



Cách tạo một Tooltip

Để tạo tooltip, add thuộc tính data-toggle="tooltip" cho phần tử.

Sử dụng thuộc tính title để chỉ định văn bản sẽ được hiển thị bên trong tooltip:

<a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a>

Note: Tooltips phải được khởi tạo với jQuery: chọn thành phần được chỉ định và gọi phương thức tooltip().

Đoạn code sau sẽ enable tất cả tooltips trong trang:

Ví dụ

<script>
$(document).ready(function(){
  $('[data-toggle="tooltip"]').tooltip();
});
</script>

Positioning Tooltips

Theo mặc định, tooltip sẽ xuất hiện trên đầu của phần tử.

Sử dụng thuộc tính data-placement để đặt vị trí của tooltip là top, bottom, left hoặc right so với phần tử:

Ví dụ

<a href="#" data-toggle="tooltip" data-placement="top" title="Hooray!">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="bottom" title="Hooray!">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="left" title="Hooray!">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="right" title="Hooray!">Hover</a>

Bình luận



Đã sao chép!!!