🐬 Wapmaster share code hay
🐬 Wapmaster Dat007
D
A
T
0
0
7
K
Í
N
H
C
H
Ú
C
C
Á
C
B
Ạ
N
T
H
À
N
H
C
Ô
N
G
T
R
O
N
G
C
Ô
N
G
V
I
Ệ
C
☰▶
✈ Ảnh nền
✈ Nhạc chuông
✈ Icon đẹp
✈ Chửa bệnh
✈ Xem Phim
✈ ký tự đẹp
✈ Câu đố hay
✈ Truyện ma
✈ Xoay Ảnh
✈ Wapmaster
×
CÁC TIỆN ÍCH
✔ Nhạc nền cho wap/web
✔ Bố cục Chia 2,3,4 cột
✔ Tạo nhận xét cho blogspot
✔ Lớp phủ điều hướng
✔ Thanh trượt
✔ Menu trượt bên trái
✔ DIV kéo thả
✔ Hiệu ứng xoay ảnh
✔ Hiệu ứng ảnh
✔ Hiệu ứng chử chạy
✔ Code thường dùng
✔ Auto nội dung
✔ Chống copy
✔ Hiệu ứng chuột
✔ Chạy thử Code
✔ Chạy thử mã hóa Code
✔ Lốp Menu
✔ Code tổng hợp
✔ Ẩn hiện nội dung
✔ Tràn văn bản
✔ Khung cho blogger
✔ Bo tròn góc
✔ Auto Wap/Web wapego
✔ Auto Wap/Web xtgem
✔ Đưa website lên google
✔ Css tooltip
✔ 4 Nút Sidenav
✔ Icon đẹp
✔ Mã màu css
✔ Tìm hiểu CSS
✔ Mã màu CSS
✔ Css 1
✔ Css 2
✔ Css 3
✔ Css 4
✔ Css 5
✔ Css 6
✔ Css 7
✔ Ký tự đặc biệt
Css tooltip
Top Tooltip
Tạo một chú giải công cụ xuất hiện khi người dùng di chuyển chuột qua một phần tử
Gê chuột vào đây
Tooltip text
Bên phải
<style> .tooltip { position: relative; display: inline-block; border-bottom: 1px dotted black; } .tooltip .tooltiptext { visibility: hidden; width: 120px; background-color: black; color: #fff; text-align: center; border-radius: 6px; padding: 5px 0; /* Position the tooltip */ position: absolute; z-index: 1; top: -5px; left: 105%; } .tooltip:hover .tooltiptext { visibility: visible; } </style> <body style="text-align:center;"> <h2>Tìm hiểu cách tạo chú giải công cụ với CSS. Di chuột qua văn bản thả bên trên hoặc dưới:</h2> <div class="tooltip">Hover over me <span class="tooltiptext">Tooltip text</span> </div>
Bên trái
<style> .tooltip { position: relative; display: inline-block; border-bottom: 1px dotted black; } .tooltip .tooltiptext { visibility: hidden; width: 120px; background-color: black; color: #fff; text-align: center; border-radius: 6px; padding: 5px 0; /* Position the tooltip */ position: absolute; z-index: 1; top: -5px; right: 105%; } .tooltip:hover .tooltiptext { visibility: visible; } </style> <body style="text-align:center;"> <h2>Left Tooltip</h2> <p>Move the mouse over the text below:</p> <div class="tooltip">Hover over me <span class="tooltiptext">Tooltip text</span> </div>
Phía Trên
<style> .tooltip { position: relative; display: inline-block; border-bottom: 1px dotted black; } .tooltip .tooltiptext { visibility: hidden; width: 120px; background-color: black; color: #fff; text-align: center; border-radius: 6px; padding: 5px 0; /* Position the tooltip */ position: absolute; z-index: 1; bottom: 100%; left: 50%; margin-left: -60px; } .tooltip:hover .tooltiptext { visibility: visible; } </style> <body style="text-align:center;"> <h2>Top Tooltip</h2> <p>Move the mouse over the text below:</p> <div class="tooltip">Hover over me <span class="tooltiptext">Tooltip text</span> </div>
Phía dưới
<style> .tooltip { position: relative; display: inline-block; border-bottom: 1px dotted black; } .tooltip .tooltiptext { visibility: hidden; width: 120px; background-color: black; color: #fff; text-align: center; border-radius: 6px; padding: 5px 0; /* Position the tooltip */ position: absolute; z-index: 1; top: 100%; left: 50%; margin-left: -60px; } .tooltip:hover .tooltiptext { visibility: visible; } </style> <body style="text-align:center;"> <h2>Bottom Tooltip</h2> <p>Move the mouse over the text below:</p> <div class="tooltip">Hover over me <span class="tooltiptext">Tooltip text</span> </div>
Phía trên
<style> .tooltip { position: relative; display: inline-block; border-bottom: 1px dotted black; } .tooltip .tooltiptext { visibility: hidden; width: 120px; background-color: black; color: #fff; text-align: center; border-radius: 6px; padding: 5px 0; position: absolute; z-index: 1; bottom: 150%; left: 50%; margin-left: -60px; } .tooltip .tooltiptext::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: black transparent transparent transparent; } .tooltip:hover .tooltiptext { visibility: visible; } </style> <body style="text-align:center;"> <h2>Top Tooltip w/ Bottom Arrow</h2> <div class="tooltip">Hover over me <span class="tooltiptext">Tooltip text</span> </div>
Trang chủ
Đăng ký:
Bài đăng (Atom)
