Cách thêm một Tooltip WordPress bằng plugin hoặc CSS

Cách thêm một Tooltip WordPress – Đôi khi bạn cần cung cấp đến người dùng website nhiều thông tin hơn, nhưng đơn giản là không có nhiều không gian ở trang. Bạn luôn có khả năng bao gồm liên kết đến trang khác, tuy nhiên nhiều trường hợp, cách tiếp cận thuận tiện nhất là thêm công cụ WordPress đơn giản hiển thị toàn bộ thông tin người dùng cần.

Với tooltip WordPress, còn được gọi là tooltip CSS, toàn bộ thông tin khách truy cập cần có ngay tại đó bằng cách ‘di chuyển qua’ phần tử bên phải.

Dưới đây, chúng tôi sẽ để bạn thấy vài ví dụ yêu thích từ chúng tôi về công cụ di chuột CSS đang hoạt động. Tiếp đó, chúng tôi sẽ hướng dẫn bạn cách thêm chúng vào website.

Giới thiệu về Tooltip

Khái niệm về tooltip WordPress rất đơn giản. Chúng là hộp chứa nổi ‘pop- up’ khi bạn di chuột qua yếu tố cụ thể.

Thông thường, Tooltip cung cấp thông tin bổ sung mà bạn không muốn đưa lên thiết kế ban đầu.

Ví dụ: nếu bạn đang tạo bảng giá, Tooltip giúp bạn chia nhỏ từng tính năng thực hiện mà không làm hỏng thiết kế:

Trường hợp sử dụng khác bao gồm định nghĩa từ, thêm nguồn vào nội dung, nhận xét biên tập, bản đồ cùng khá nhiều yếu tố khác mà bạn nghĩ đến.

Hai cách để thêm một tooltip WordPress

WordPress để bạn sử dụng nhiều cách tiếp cận khi thêm công cụ vào website. Bạn có thể làm như vậy thủ công (bao gồm thêm mã) hoặc sử dụng plugin.

Bắt đầu bằng cách chỉ bạn cách thêm Tooltip bằng plugin công cụ WordPress miễn phí. Tiếp đó, sẽ đi sâu vào phương pháp CSS thủ công.

Sử dụng plugin tooltip WordPress

Toàn bộ quan điểm từ việc sử dụng plugin là giúp bạn tiết kiệm thời gian bổ sung tính năng theo cách thủ công. Với suy nghĩ này, Shortcodes Ultimate cung cấp cách triển khai tooltip dễ dàng nhất với người dùng WordPress.

Khi bạn kích hoạt plugin, bạn có quyền truy cập vào hàng tá mã ngắn mà bạn được sử dụng để thêm bất cứ thứ gì từ nút, đến thanh trượt, băng chuyền hình ảnh, dải phân cách,…

Tất nhiên, Tooltip nằm ở danh sách yếu tố được Shortcodes Ultimate hỗ trợ. Thậm chí tốt hơn, mọi shortcode đều được tùy chỉnh hoàn toàn bằng cách sử dụng cài đặt cùng CSS tích hợp.

Để bắt đầu, hãy mở trình chỉnh sửa khối trang bạn muốn thêm công cụ WordPress đầu tiên. Tiếp đó, tìm nút chèn Shortcode mới tại menu bất kỳ khối nào hiện có:

Ngay lập tức, bạn sẽ thấy danh sách mã ngắn có sẵn. Chọn tùy chọn Tooltip :

Bây giờ bạn có cơ hội tùy chỉnh phong cách tooltip. Chúng tôi đã quyết định chọn thiết kế cơ bản rồi đặt nó lên trên phần tử bạn di chuột qua:

Cuộn xuống đến khi bạn đến trường Nội dung Tooltip rồi nhập văn bản bạn muốn phần tử hiển thị:

Lưu ý: bạn cũng được định cấu hình cách hoạt động chú giải công cụ. Tùy chọn mặc định sẽ ẩn vùng chứa và văn bản ch đến khi bạn di chuột qua phần tử gốc.Bạn cũng được định cấu hình chú giải công cụ để chúng không hiển thị trừ khi bạn nhấp vào phần tử gốc, tuy nhiên điều đó đôi khi gây rắc rối đến khách truy cập.

Đây là mã ngắn mới sẽ trông ra sao tại trình chỉnh sửa khối:

Nếu bạn xem trước phần này ở mặt trước, thì đây là cách mà tooltip hoạt động:

Hãy nhớ rằng, bạn được thêm Tooltip gần như bất cứ nơi nào bạn muốn bằng cách sử dụng mã ngắn phù hợp. Điều này áp dụng với văn bản thông thường, bảng, biểu tượng hay yếu tố khác.

Tuy nhiên, theo nguyên tắc thông thường, bạn muốn thêm vài chỉ báo trực quan để người dùng biết họ nên di chuột qua phần tử Parent. Gạch chân hoặc biến thể màu hoạt động tốt. Bạn cũng được sử dụng biểu tượng cảm xúc thông tin.

Xem thêm: Phân tích trang web của đối thủ

Thiết lập các chú giải công cụ di chuột CSS theo cách thủ công

Ở phần trước, đã nói về cách thêm chú giải công cụ di chuột bằng cách sử dụng plugin. Plugin về cơ bản thiết lập nhiều kiểu CSS cho bạn. Điều này nghĩa là bạn chọn từ danh sách cài đặt và plugin đã tạo ra mã ngắn cần thiết.

Tuy nhiên, không có lý do tại sao bạn không thể làm điều này bằng tay với mã. Cách dễ nhất để thêm vài lớp CSS mới vào giao diện của bạn là sử dụng trình tùy chỉnh WordPress.

Để truy cập trình tùy chỉnh, điều hướng đến Giao diện> Themes từ bảng điều khiển rồi tìm tab CSS bổ sung ở cuối trình đơn bên trái:

Tiếp theo, thêm ba lớp CSS vào giao diện:

Một cho container tooltip
Khác cho văn bản
Một cái cuối cùng để che giấu mọi thứ

Tóm lại, mã này tạo ra thùng chứa trống cùng đặt vị trí từ nó so với phần tử parent. Tiếp theo, nó bổ sung vài kiểu dáng cho văn bản bạn muốn đưa vào, chẳng hạn như phần đệm, căn chỉnh, màu sắc và chiều rộng tổng thể. Cuối cùng, nó đặt container ở ẩn đến khi bạn di chuột qua phần tử đó.

Khi bạn lưu CSS tùy chỉnh này vào giao diện, bạn gọi chú giải công cụ từ bất kỳ trang nào trên website. Để làm điều đó, truy cập trình chỉnh sửa khối cho trang bạn muốn thêm chú giải công cụ.

Chọn khối nơi bạn muốn thêm chú giải công cụ đầu tiên rồi chọn tùy chọn chỉnh sửa dưới dạng HTML :

Bây giờ, thêm văn bản chứa văn bản gốc cho chú giải công cụ của bạn và thông tin bạn muốn chứa nó:

<div class=”tooltip-text”>Parent text

<span class=”tooltiptext”>Tooltip text here!</span>

</div>

Hãy chắc chắn để thêm tooltip-text vào lớp CSS. Đây là lớp CSS mà bạn đã thêm vào giao diện bằng cách sử dụng tùy biến. Nếu bạn đặt tên khác cho lớp của bạn, hãy tiếp tục và thay đổi nó.

Đây là những gì tooltip từ chúng tôi giống như ở trình soạn thảo:

Nếu bạn lưu thay đổi vào trang rồi đi đến giao diện người dùng, bạn sẽ thấy thay đổi:

Khi bạn di chuột qua văn bản gốc, Tooltip sẽ hiển thị:

Hãy nhớ, bạn được định kiểu Tooltip CSS như yếu tố website khác. Điều này nghĩa là sử dụng màu khác nhau, sửa đổi vùng chứa, hơn thế nữa, vì vậy toàn bộ chúng đều phù hợp với phong cách website bạn.

Để làm điều đó, bạn cần học vài CSS cơ bản. Codecademy có khóa học CSS tốt.