Search
Generic filters
Exact matches only
Filter by Custom Post Type

Try these: wordpressfront endvloghackerrankmalaysia

Cách tạo “Tooltip” với HTML và CSS

Vào một buổi chiều đầy nắng và gió, trong quá trình ngồi mò mẫm trên stackoverflow và lướt facebook để tìm ra cách để làm một cái tooltip chuẩn men nhất thì tui vô tình phát hiện ra được cái code này về tooltip khá hay nên muốn viết ngay một cái post để chia sẽ cho các anh em cùng tham khảo, hy vọng sẽ nó là một bài viết ngắn ngọn súc tích nhưng hữu ích cho những anh em nào chưa biết, mong mỏi sẽ không ăn hành 🙂

tooltip

Mở Bài:

Tooltip là gì ?

Theo Wikipedia thì tooltip là một phần tử giao diện đồ hoạ phổ biến. Nó thường hoạt động với con trỏ chuột. Nó sẽ xuất hiện khi người sử dụng di chuyển chuột qua nó mà không cần phải nhấp chuột. Tooltip thường không hoạt động trên điện thoại vì trên điện thoại thì không có con trỏ.

tooltip

 

Dưới đây là một đoạn code nhỏ mô tả về tooltip.

See the Pen my tooltips by Phạm Phi Hùng (@masterhungpham) on CodePen.

Cách Hoạt Động Của Tooltip:

Đoạn văn mô tả sẽ được đặt trong trong một tag bất kỳ có class là “my-tooltip-text”, nó sẽ được ẩn đi bởi thuộc tính “visibility: hidden” và nó sẽ xuất hiện bởi hiệu ứng hover

 &:hover .my-tooltip-text
    visibility: visible

Nếu bạn có thắc mắc nào khác về tooltip thì đừng quên để lại bình luận phía dưới nhé, mình sẽ giúp đỡ các bạn giải đáp thắc mắc.

Chào các bạn, tôi là Phạm Phi Hùng, tác giả của blog Hung Pham Dev Web. Tôi là một web developer, kiêm writer, quay phim dạo, dựng phim dạo, sửa máy dạo và làm một số ngành nghề khác nữa.