Petua Alat HTML
Petua alat ialah konsep yang digunakan dalam HTML untuk menunjukkan beberapa maklumat tambahan tentang elemen yang dipilih secara khusus. Ini boleh dilakukan pada kesan tuding tetikus apabila pengguna menggerakkan tetikus ke atas elemen yang menggunakan petua alat untuk memaparkan maklumat yang ditentukan tentang elemen tersebut.
Ia digunakan sebagai elemen sebaris seperti span, kadangkala dengan teks petua alat kelas. Seseorang boleh menetapkan kedudukan pada teks tip alat itu dengan menggunakan CSS, yang membantu kami menentukan beberapa gaya dan kedudukan pada tip alat kami. Menggunakan petua alat pada Halaman Web kami membantu kami melakukan lebih banyak interaksi dengan pengguna kerana ia memberikan maklumat ringkas tentang elemen yang disertakan.
Sintaks
HTML menggunakan kaedah yang mentakrifkan petua alat dengan menggunakan pautan dengan atribut tajuk. Ia boleh mentakrifkan seperti berikut:
<a href="" title="tooltip_text"> Content </a>
Seperti yang ditunjukkan dalam sintaks di atas, teks yang dipaparkan dalam atribut tajuk dianggap sebagai teks tip alat. Jadi pengguna boleh mengklik pautan ini untuk melihat maklumat lanjut mengenainya.
Tajuk itu dianggap sebagai atribut global, jadi ia membolehkan pengguna menambahkannya dengan mudah pada elemen, iaitu semudah menambah kelas atau id pada elemen. Dengan bantuan itu, seseorang boleh menambah apa sahaja bermakna perenggan, blok div, yang mengandungi keseluruhan lajur dan banyak lagi perkara. Pada asasnya, petua alat ditunjukkan di atas elemen. Seseorang boleh meletakkan petua alat mereka pada kedudukan seperti atas, bawah, kiri atau kanan. Kedudukan ini ke petua alat mereka dengan menggunakan beberapa nilai yang ditakrifkan dalam CSS.
Bagaimana untuk Menambah Petua Alat dalam HTML?
Petua alat boleh ditambah pada elemen dalam HTML. Ia menggunakan elemen seperti div, perenggan dan banyak lagi. Apabila tetikus melayang pada atribut khusus itu, ia akan menunjukkan teks atau maklumat lain yang dikenali sebagai petua alat. Ia boleh dipaparkan di kanan, kiri, atas atau bawah pada sebarang kedudukan teks. Ini adalah seperti berikut:
1. Kedudukan Teratas
Dalam kedudukan ini, petua alat akan dipaparkan di bahagian atas elemen.
Kod:
.tooltip.tooltiptext{
width: 160px;
bottom:80%;
left:40%;
margin-left: 80px;
}2. Kedudukan Betul
Kod petua alat ini akan petua alat dipaparkan di sebelah kanan elemen.
Kod:
.tooltip.tooltiptext{
top:4px;
left:100%;
}3. Kedudukan Kiri
Kod petua alat ini akan petua alat dipaparkan di sebelah kiri elemen.
Kod:
.tooltip.tooltiptext{
top:4px;
right:100%;
}4. Kedudukan Bawah
Dalam kedudukan ini, petua alat akan dipaparkan di bahagian bawah elemen.
Kod:
.tooltip.tooltiptext{
width: 160px;
top:100%;
left:40%;
margin-left: 80px;
}Seseorang juga boleh memaparkan petua alat anak panah kepada elemen dengan menggunakan ciri petua alat ini yang ditakrifkan di dalamnya. Petua alat HTML membantu membuka halaman web yang dipautkan, dokumen atau imej yang berkaitan juga. Kita boleh memaparkan bahawa menggunakan petua alat memaparkan petua alat dengan fade in sama seperti kesan animasi. Kita boleh melakukannya dengan menggunakan kod seperti berikut:
Kod:
.tooltip.tooltiptext{
opacity:0;
transition: opacity 5s;
}
.tooltip:hover.tooltiptext{
opacity:0;Kita boleh melakukan perkara yang paling penting dengan menggunakan petua alat untuk membuka kotak modal dengan mengklik petua alat tunggal. Kod jenis ini kebanyakannya digunakan apabila diperlukan untuk membuka beberapa jenis borang atau butiran lain dengan menggunakan pautan mudah. Ini dianggap sebagai cara paling mudah untuk membuka modal dengan kod minimum.
Contoh HTML Tooltip
Di bawah ialah contoh petua alat HTML:
Contoh #1
Ini ialah salah satu contoh menunjukkan kedudukan petua alat dengan nilai Kanan dan Kiri.
Kod HTML:
<!DOCTYPE html>
<html>
<style>
/*right position*/
.tooltipright{
position: relative;
display: inline-block;
border-bottom: 2px dotted blue;
}
.tooltipright .toolttext {
visibility: hidden;
width: 200px;
height:100px;
background-color:lightsalmon;
color: black;
text-align: center;
border-radius: 4px;
padding: 8px ;
/* Position the tooltip */
position: absolute;
z-index: 0;
left: 110%;
}
.tooltipright .toolttext {
visibility: visible;
}
/*left position*/
.tooltipleft{
position: relative;
display: inline-block;
border-bottom: 2px dotted blue;
}
.tooltipleft .toolttextleft {
visibility: hidden;
width: 200px;
height:50px;
background-color:lightsalmon;
color: black;
text-align: center;
border-radius: 4px;
padding: 5px ;
/* Position the tooltip */
position: absolute;
z-index: 1;
right: 130%;
}
.tooltipleft:hover .toolttextleft {
visibility: visible;
}
</style>
<body style="text-align:center;">
<h2>Tooltip with different Position</h2>
<p style="color :crimson;">Tooltip with Right position</p>
<div class="tooltipright">What is Web Development?
<span class="toolttext">Web Development is a technology used for developing websites, Designing Single page application's webpage etc.</span>
</div>
<br>
<p style="color :crimson;">Tooltip with Left position</p>
<div class="tooltipleft">What is HTML?
<span class="toolttextleft">HTML is markup language for designing web pages for browser. </span>
</div>
</body>
</html>Output:
Contoh #2
Contoh ini menggambarkan bahawa kita boleh menggunakan petua alat pada beberapa pautan dan juga untuk imej. Jadi apabila pengguna menuding tetikus padanya, ini akan memaparkan maklumat atau pautan boleh klik untuk membuka halaman web atau dokumen lain.
Kod HTML:
<html> <head> <title>HTML tooltip</title> </head> <body> <h4>HTMl Tooptip working on Image and Link</h4> <img src="../Desktop/EDUCBA.png" title="EDUCBA"/ style="height:100px; width:300px;"> <br/> <a href="https://www.educba.com/" title="All About EDUCBA."> Online Training and Video Courses</a> </body> </html>
Output:
Setiap kali pengguna mengklik pada pautan yang diberikan, ia akan menunjukkan halaman web yang dipautkan seperti berikut:
Contoh #3
Apabila kita mahu memaparkan tetingkap timbul pada tuding atau klik pada elemen tertentu, maka petua alat ialah pilihan terbaik untuk mengendalikan perkara ini dengan mudah.
Kod HTML:
<html>
<head>
<title>HTML tooltip</title>
</head>
<style>
.arrowpopup {
position: relative;
display: inline-block;
cursor: pointer;
}
.arrowpopup .tooltiptext {
visibility: hidden;
width: 160px;
background-color: #856;
color: white;
text-align: center;
border-radius: 4px;
padding: 9px ;
position: absolute;
bottom: 150%;
left: 50%;
margin-left: -85px;
}
.arrowpopup .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #856 transparent transparent transparent;
}
.arrowpopup .show {
visibility: visible;
}
</style>
<body style="padding:100px;">
<div class="arrowpopup" onclick="myFunction()">Tooltip Demo Click here!
<span class="tooltiptext" id="tooltipdemo">HTML Tooltip helps you to display extra information of element.</span>
</div>
<script>
function myFunction() {
var tt = document.getElementById("tooltipdemo");
tt.classList.toggle("show");
}
</script>
</body>
</html>Output:
Kesimpulan
Daripada semua maklumat di atas, kami menyedari bahawa Petua Alat ialah ciri dalam HTML yang digunakan untuk menunjukkan beberapa maklumat berkaitan atau penerangan ringkas bagi elemen yang dipilih. Mengikut pilihan pengguna, mereka boleh membuat keputusan di mana petua alat ini akan muncul mengikut elemen tersebut. Nilai kedudukan ialah kanan, kiri, atas atau bawah.
Atas ialah kandungan terperinci Petua Alat HTML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
Sempadan Jadual dalam HTML
Sep 04, 2024 pm 04:49 PM
Panduan untuk Sempadan Jadual dalam HTML. Di sini kita membincangkan pelbagai cara untuk menentukan sempadan jadual dengan contoh Sempadan Jadual dalam HTML.
Jadual Bersarang dalam HTML
Sep 04, 2024 pm 04:49 PM
Ini ialah panduan untuk Nested Table dalam HTML. Di sini kita membincangkan cara membuat jadual dalam jadual bersama-sama dengan contoh masing-masing.
HTML jidar-kiri
Sep 04, 2024 pm 04:48 PM
Panduan untuk HTML margin-kiri. Di sini kita membincangkan gambaran keseluruhan ringkas tentang HTML margin-left dan Contoh-contohnya bersama-sama dengan Pelaksanaan Kodnya.
Susun Atur Jadual HTML
Sep 04, 2024 pm 04:54 PM
Panduan untuk Susun Atur Jadual HTML. Di sini kita membincangkan Nilai Susun Atur Jadual HTML bersama-sama dengan contoh dan output n perincian.
Pemegang Tempat Input HTML
Sep 04, 2024 pm 04:54 PM
Panduan untuk Pemegang Tempat Input HTML. Di sini kita membincangkan Contoh Pemegang Tempat Input HTML bersama-sama dengan kod dan output.
Senarai Tertib HTML
Sep 04, 2024 pm 04:43 PM
Panduan kepada Senarai Tertib HTML. Di sini kami juga membincangkan pengenalan senarai dan jenis Tertib HTML bersama-sama dengan contoh mereka masing-masing
Butang onclick HTML
Sep 04, 2024 pm 04:49 PM
Panduan untuk Butang onclick HTML. Di sini kita membincangkan pengenalan, kerja, contoh dan onclick Event masing-masing dalam pelbagai acara.
Memindahkan Teks dalam HTML
Sep 04, 2024 pm 04:45 PM
Panduan untuk Memindahkan Teks dalam HTML. Di sini kita membincangkan pengenalan, cara teg marquee berfungsi dengan sintaks dan contoh untuk dilaksanakan.
