Hướng dẫn bootstrap tooltip codepen - bootstrap tooltip codepen

Question

Xin chào các bạn quay lại blog của mình. Hôm nay mình sẽ giới thiệu tiếp về các component tooltips và popovers trong Bootstrap 4. Nào hãy cũng mình tìm hiểu nhé!

Nội dung chính Show

Component Tooltip:
Vị trí Tooltip:
Thêm hình ảnh vào Tooltip:
Thuộc tính delay trong Tooltip:
Component Popovers:
Delay trong Popover:
Để tạo component này thì bước đầu tiên mình cần thêm thuộc tính <script> $(document).ready(function(){ $('[data-toggle="tooltip"]').tooltip(); }); </script>4 và thuộc tính <script> $(document).ready(function(){ $('[data-toggle="tooltip"]').tooltip(); }); </script>5 giúp chúng ta xác định chữ sẽ hiện bên trong tooltip (thông tin thêm, chỉ dẫn...) vào đối tượng HTML. Để dễ hình dung bạn xem đoạn code dưới đây nhé:
Component Popover:
Vị trí Popover:
Thuộc tính data-trigger="focus" trong Popover:
Delay trong Popover:

Nội dung chính ShowShow

Component Tooltips:
Component Tooltip:
Vị trí Tooltip:
Thêm hình ảnh vào Tooltip:
Thuộc tính delay trong Tooltip:
Component Popovers:
Component Popover:
Vị trí Popover:
Thuộc tính data-trigger="focus" trong Popover:
Delay trong Popover:

Tooltip là một đoạn chữ nhỏ được xuất hiện khi người dùng đưa chuột lên (hover) các đối tượng trong HTMl như là thẻ a, button... để cung cấp chỉ dẫn hay thông tin thêm về đối tượng được hover. Nó sẽ rất hữu ích đối với những người dùng mới khi vào trang web của bạn vì tooltip sẽ cung cấp thông tin hay mục đích sử dụng của các biểu tượng và liên kết bằng cách hover chúng. là một đoạn chữ nhỏ được xuất hiện khi người dùng đưa chuột lên (hover) các đối tượng trong HTMl như là thẻ a, button... để cung cấp chỉ dẫn hay thông tin thêm về đối tượng được hover. Nó sẽ rất hữu ích đối với những người dùng mới khi vào trang web của bạn vì tooltip sẽ cung cấp thông tin hay mục đích sử dụng của các biểu tượng và liên kết bằng cách hover chúng. là một đoạn chữ nhỏ được xuất hiện khi người dùng đưa chuột lên (hover) các đối tượng trong HTMl như là thẻ a, button... để cung cấp chỉ dẫn hay thông tin thêm về đối tượng được hover. Nó sẽ rất hữu ích đối với những người dùng mới khi vào trang web của bạn vì tooltip sẽ cung cấp thông tin hay mục đích sử dụng của các biểu tượng và liên kết bằng cách hover chúng.

Để tạo component này thì bước đầu tiên mình cần thêm thuộc tính

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

4 và thuộc tính

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

5 giúp chúng ta xác định chữ sẽ hiện bên trong tooltip (thông tin thêm, chỉ dẫn...) vào đối tượng HTML. Để dễ hình dung bạn xem đoạn code dưới đây nhé:

HTML

<a href="#" data-toggle="tooltip" id="tooltip_vi_du" title="Nội dung">Hover Vào Liên Kết</a>

Bước thứ hai là nếu muốn tooltip hoạt động thì chúng ta bắt buộc phải thiết lập với Jquery bằng cách gọi đối tượng theo id, class hay là thuộc tính... mà bạn muốn hiển thị và gọi hàm

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

6 cho nó. Để dễ hình dung bạn xem đoạn code Jquery dưới đây nhé:

JS

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

Ở trên là mình sẽ thực hiện hàm tooltip cho tất cả đối tượng HTML mà có thuộc tính

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

4. Bước tiếp theo chúng ta sẽ kết hợp hai đoạn code trên để tạo ra component tooltip. Để nắm rõ hơn bạn xem ví dụ dưới đây nhé:

Vị trí Tooltip:

Thêm hình ảnh vào Tooltip:

Thuộc tính delay trong Tooltip:

Component Popovers:

Component Popover:

Vị trí Popover:

Component Popovers:

Component Popover:Popovers cũng giống như chức năng của Tooltip nhưng chỉ sẽ hiển thị khi mà người dùng nhấn (click) vào đối tượng HTML. Để sử dụng nó bạn cần thêm file Poper.js vào trong File HTML nhé. Để xem cách chèn file này thì bạn tham khảo ở đây: Ở Phần Component Dropdown hoặc ở Bootstrap Thêm Popper.js. Ở đây chúng ta cũng sẽ có hai bước như trên:

Vị trí Popover:

Thuộc tính data-trigger="focus" trong Popover:

<a class="btn btn-primary" href="#" data-toggle="popover" title="Tiêu Đề" data-content="Nội Dung">Hiển thị popover</a>

Tooltip là một đoạn chữ nhỏ được xuất hiện khi người dùng đưa chuột lên (hover) các đối tượng trong HTMl như là thẻ a, button... để cung cấp chỉ dẫn hay thông tin thêm về đối tượng được hover. Nó sẽ rất hữu ích đối với những người dùng mới khi vào trang web của bạn vì tooltip sẽ cung cấp thông tin hay mục đích sử dụng của các biểu tượng và liên kết bằng cách hover chúng. là một đoạn chữ nhỏ được xuất hiện khi người dùng đưa chuột lên (hover) các đối tượng trong HTMl như là thẻ a, button... để cung cấp chỉ dẫn hay thông tin thêm về đối tượng được hover. Nó sẽ rất hữu ích đối với những người dùng mới khi vào trang web của bạn vì tooltip sẽ cung cấp thông tin hay mục đích sử dụng của các biểu tượng và liên kết bằng cách hover chúng.

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

HTML

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

2. Bước tiếp theo chúng ta sẽ kết hợp hai đoạn code trên để tạo ra component popover. Để nắm rõ hơn bạn xem ví dụ dưới đây nhé:

See the Pen popover by haycuoilennao19 (@haycuoilennao19) on CodePen.

Tiếp theo mình sẽ chỉ bạn cách điều chỉnh vị trí của Popover như hiển thị bên trái, bên phải, ở trên hay là ở dưới bằng thuộc tính

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

8 với position là các hướng mặc định của Bootstrap như là left, right, top và bottom. Để hiểu rõ hơn bạn xem ví dụ dưới đây nhé:

See the Pen position of popovers by haycuoilennao19 (@haycuoilennao19) on CodePen.

Để xem được kết quả bạn chuyển sang chế độ screen 0.5x, 0.25x nhé. Như ví dụ trên thì chúng ta sẽ gặp một vấn đề là khi người dùng nhấn vào 4 popover thì nó sẽ hiện hết cả 4, nhiều khi như vậy sẽ làm người dùng khó chịu vì khi muốn ẩn popover thì họ phải nhấn lại thêm một lần nữa vào các popover muốn ẩn. Để tránh tình trạng đó thì mình sẽ sử dụng thuộc tính

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

7 có nhiệm vụ sẽ tự động ẩn popover khi người dùng nhấn vào popover tiếp theo. Để hiễu rõ hơn bạn hãy xem ví dụ dưới đây nhé:0.5x, 0.25x nhé. Như ví dụ trên thì chúng ta sẽ gặp một vấn đề là khi người dùng nhấn vào 4 popover thì nó sẽ hiện hết cả 4, nhiều khi như vậy sẽ làm người dùng khó chịu vì khi muốn ẩn popover thì họ phải nhấn lại thêm một lần nữa vào các popover muốn ẩn. Để tránh tình trạng đó thì mình sẽ sử dụng thuộc tính

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

7 có nhiệm vụ sẽ tự động ẩn popover khi người dùng nhấn vào popover tiếp theo. Để hiễu rõ hơn bạn hãy xem ví dụ dưới đây nhé:0.5x, 0.25x nhé. Như ví dụ trên thì chúng ta sẽ gặp một vấn đề là khi người dùng nhấn vào 4 popover thì nó sẽ hiện hết cả 4, nhiều khi như vậy sẽ làm người dùng khó chịu vì khi muốn ẩn popover thì họ phải nhấn lại thêm một lần nữa vào các popover muốn ẩn. Để tránh tình trạng đó thì mình sẽ sử dụng thuộc tính

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

7 có nhiệm vụ sẽ tự động ẩn popover khi người dùng nhấn vào popover tiếp theo. Để hiễu rõ hơn bạn hãy xem ví dụ dưới đây nhé:

See the Pen data-trigger="focus" Bootstrap by haycuoilennao19 (@haycuoilennao19) on CodePen.

Bây giờ mình sẽ giới thiệu cách đưa nội dung, hình ảnh, icon... vào trong Popover bằng Jquery. Để hiểu rõ hơn bạn xem ví dụ dưới đây nhé:

See the Pen Add content and image Popover by haycuoilennao19 (@haycuoilennao19) on CodePen.

Chúng ta cũng có thể thiết lập thời gian delay cho component Popover như Tooltip bằng cách sử dụng thuộc tính delay. Để hiểu rõ hơn bạn xem ví dụ dưới đây nhé:

See the Pen Delay in Popover by haycuoilennao19 (@haycuoilennao19) on CodePen.

Ở đây mình sử dùng thuộc tính

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

9 để xác định khi người dùng nhấn (click) vào đối tượng thì sau 2s nó sẽ hiện bằng thuộc tính

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

0 và khi người dùng nhấn (click) đối tượng lần nữa thì tooltip sẽ ẩn đi sau 0.5s bằng thuộc tính

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

1.

Tổng kết:

Qua đây mình mong bài viết sẽ giúp các bạn nắm được thêm các component trong Bootstrap 4 và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!