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:

<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>

<h2 id="Tooltip-with-different-Position">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>

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:

<title>HTML tooltip</title>


<h4 id="HTMl-Tooptip-working-on-Image-and-Link">HTMl Tooptip working on Image and Link</h4>
<img  src="/static/imghwm/default1.png" data-src="../Desktop/EDUCBA.png" class="lazy" title="EDUCBA"   style="max-width:90%" alt="Petua Alat HTML" >
<br>
<a href="https://www.educba.com/" title="All About EDUCBA.">
Online Training and Video Courses</a>

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:

<title>HTML tooltip</title>

<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>

<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>

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!