บทความนี้จะสาธิตคำแนะนำเครื่องมือโดยใช้ JavaScript ธรรมดา
จะสร้างคำแนะนำเครื่องมือ JavaScript ธรรมดาได้อย่างไร
หากต้องการสร้างคำแนะนำเครื่องมือโดยใช้ JavaScript ให้ใช้ปุ่ม “ วางเมาส์ ' และ ' เม้าส์เอาท์ ” เหตุการณ์. ทำตามตัวอย่างด้านล่างเพื่อความเข้าใจที่ดีขึ้น
ตัวอย่างที่ 1: คำแนะนำเครื่องมือโดยใช้ JavaScript
ในตัวอย่างที่กำหนด เราจะสร้างคำแนะนำเครื่องมือใน JavaScript แท้ และกำหนดรูปแบบคำแนะนำเครื่องมือโดยใช้ “ สไตล์ ' คุณลักษณะ.
ขั้นแรก สร้างข้อความที่เราต้องการแสดงคำแนะนำเครื่องมือบนเหตุการณ์การวางเมาส์:
< รหัส h5 = 'ข้อความ' > ลีนุกซ์ h5 >
รับข้อความที่คำแนะนำเครื่องมือจะปรากฏขึ้นโดยใช้ปุ่ม “ getElementById() ' วิธี:
ที่ไหน = เอกสาร. getElementById ( 'ข้อความ' ) ;
ตอนนี้โทรหา ' addEventListener() ” วิธีการโดยผ่าน “ วางเมาส์ ” เหตุการณ์และฟังก์ชั่น () เป็นพารามิเตอร์ ในฟังก์ชันที่กำหนดไว้ อันดับแรก เราจะสร้างคำแนะนำเครื่องมือโดยสร้าง “ แผนก ” ตั้งค่าข้อความที่จะแสดงบนโฮเวอร์ และตั้งค่าสไตล์ของคำแนะนำเครื่องมือโดยใช้ปุ่ม “ สไตล์ ' คุณลักษณะ. สุดท้าย เพิ่มคำแนะนำเครื่องมือโดยใช้ “ ผนวกเด็ก () ' วิธี:
ล. addEventListener ( 'เลื่อนเมาส์' , การทำงาน ( ) {เป็นคำแนะนำเครื่องมือ = เอกสาร. สร้างองค์ประกอบ ( 'ดิฟ' ) ;
เคล็ดลับเครื่องมือ HTML ภายใน = 'เว็บไซต์ที่ดีที่สุดในการเรียนรู้ทักษะ' ;
เคล็ดลับเครื่องมือ สไตล์ . ทัศนวิสัย = 'มองเห็นได้' ;
เคล็ดลับเครื่องมือ สไตล์ . ตำแหน่ง = 'สัมบูรณ์' ;
เคล็ดลับเครื่องมือ สไตล์ . สีพื้นหลัง = 'rgb(107, 101, 101)' ;
เคล็ดลับเครื่องมือ สไตล์ . การขยายความ = '5px' ;
เคล็ดลับเครื่องมือ สไตล์ . borderRadius = '3px' ;
เคล็ดลับเครื่องมือ สไตล์ . สี = 'สีขาว' ;
เคล็ดลับเครื่องมือ สไตล์ . ซ้าย = 'ห้าสิบ%' ;
เคล็ดลับเครื่องมือ สไตล์ . ความกว้าง = '200px' ;
เอกสาร. ร่างกาย . ผนวกเด็ก ( เคล็ดลับเครื่องมือ ) ;
} ) ;
ที่นี่ ใช้ “ เม้าส์เอาท์ ” เหตุการณ์ที่จะลบคำแนะนำเครื่องมือขณะที่เคอร์เซอร์อยู่ห่างจากข้อความ:
ล. addEventListener ( 'เม้าส์เอาท์' , การทำงาน ( ) {
เอกสาร. ร่างกาย . ลบเด็ก ( เคล็ดลับเครื่องมือ ) ;
} ) ;
เอาต์พุต
ตัวอย่างที่ 2: เคล็ดลับการใช้ JavaScript กับ CSS
คุณยังสามารถสร้างคำแนะนำเครื่องมือใน JavaScript ด้วย CSS
ในการดำเนินการดังกล่าว ให้สร้างพื้นที่เพื่อแสดงข้อความของคำแนะนำเครื่องมือโดยใช้แท็ก และกำหนดรหัส ' #myTooltip ”:
< รหัสช่วง = 'เคล็ดลับเครื่องมือของฉัน' > ช่วง >รับการอ้างอิงของข้อความและคำแนะนำเครื่องมือโดยใช้ ' getElementById() ' วิธี:
ที่ไหน = เอกสาร. getElementById ( 'ข้อความ' ) ;เป็นคำแนะนำเครื่องมือ = เอกสาร. getElementById ( 'เคล็ดลับเครื่องมือของฉัน' ) ;
โทรคำแนะนำเครื่องมือบน “ วางเมาส์ ” เหตุการณ์โดยตั้งค่าข้อความในฟังก์ชั่นโดยใช้ปุ่ม “ HTML ภายใน ' คุณสมบัติ:
ล. addEventListener ( 'เลื่อนเมาส์' , การทำงาน ( ) {เคล็ดลับเครื่องมือ สไตล์ . ทัศนวิสัย = 'มองเห็นได้' ;
เคล็ดลับเครื่องมือ HTML ภายใน = 'เว็บไซต์ที่ดีที่สุดในการเรียนรู้ทักษะ' ;
} ) ;
ซ่อนคำแนะนำเครื่องมือบน “ เม้าส์เอาท์ ” เหตุการณ์โดยการตั้งค่า “ ทัศนวิสัย ” คุณสมบัติเป็น “ ที่ซ่อนอยู่ ”:
ล. addEventListener ( 'เม้าส์เอาท์' , การทำงาน ( ) {เคล็ดลับเครื่องมือ สไตล์ . ทัศนวิสัย = 'ที่ซ่อนอยู่' ;
} ) ;
สร้างไอดี “ #myTooltip ” ในสไตล์ชีตที่จะกำหนดสไตล์คำแนะนำเครื่องมือ:
#myTooltip {ทัศนวิสัย : ที่ซ่อนอยู่ ;
ความกว้าง : 200px ;
กับ - ดัชนี : 1 ;
พื้นหลัง - สี : rgb ( 107 , 101 , 101 ) ;
ข้อความ - จัด : ศูนย์ ;
สี : สีขาว ;
การขยายความ : 5พิกเซล 0 ;
ชายแดน - รัศมี : 3px ;
ซ้าย : ห้าสิบ %;
}
อย่างที่คุณเห็นได้ว่าคำแนะนำเครื่องมือถูกนำไปใช้กับข้อความสำเร็จแล้ว:
จะสร้างคำแนะนำเครื่องมือโดยใช้ HTML และ CSS ได้อย่างไร
คุณยังสามารถสร้างคำแนะนำเครื่องมือโดยไม่ต้องใช้ JavaScript ในไฟล์ HTML ให้สร้างข้อความ “ ลีนุกซ์ ” ซึ่งจะแสดงคำแนะนำเครื่องมือในขณะที่วางเมาส์เหนือ สร้างองค์ประกอบ เพื่อตั้งค่าข้อความสำหรับคำแนะนำเครื่องมือภายในแท็กหัวเรื่อง/ข้อความ :
ลีนุกซ์
< ช่วง ระดับ = 'ข้อความคำแนะนำเครื่องมือ' >
แพลตฟอร์มเพื่อเรียนรู้ทักษะ
ช่วง >
h5 >
ในสไตล์ชีต ให้สร้างคลาสหรือรหัสที่จะกำหนดให้กับองค์ประกอบ HTML ที่นี่เราจะสร้างคลาส “ เคล็ดลับเครื่องมือ ” ที่กำหนดให้กับหัวข้อ:
. เคล็ดลับเครื่องมือ {ตำแหน่ง : ญาติ ;
แสดง : อินไลน์ - ปิดกั้น ;
}
กำหนดคลาส “ ข้อความคำแนะนำเครื่องมือ ” เพื่อจัดรูปแบบข้อความของคำแนะนำเครื่องมือและกำหนดให้เป็น HTML “ แท็ก:
. ข้อความคำแนะนำเครื่องมือ {ทัศนวิสัย : ที่ซ่อนอยู่ ;
ความกว้าง : 150px ;
พื้นหลัง - สี : rgb ( 107 , 101 , 101 ) ;
สี : #ฟฟฟ ;
ข้อความ - จัด : ศูนย์ ;
การขยายความ : 5พิกเซล 0 ;
ชายแดน - รัศมี : 3px ;
ตำแหน่ง : แน่นอน ;
กับ - ดัชนี : 1 ;
ด้านล่าง : 125 %;
ซ้าย : ห้าสิบ %;
ขอบ - ซ้าย : - 60px ;
ความทึบ : 0 ;
การเปลี่ยนแปลง : ความทึบ 0.3 วินาที ;
}
ชุด ' โฉบ ” เอฟเฟ็กต์กับ “ เคล็ดลับเครื่องมือ ” คลาสเพื่อแสดงคำแนะนำเครื่องมือบนเอฟเฟกต์โฮเวอร์:
. เคล็ดลับเครื่องมือ : เลื่อน ข้อความคำแนะนำเครื่องมือ {ทัศนวิสัย : มองเห็นได้ ;
ความทึบ : 1 ;
}
เอาต์พุต
เราได้รวบรวมคำแนะนำที่จำเป็นทั้งหมดที่เกี่ยวข้องกับคำแนะนำเครื่องมือ JavaScript ธรรมดา
บทสรุป
หากต้องการสร้างคำแนะนำเครื่องมือโดยใช้ JavaScript ให้ใช้ปุ่ม “ วางเมาส์ ' และ ' เม้าส์เอาท์ ” เหตุการณ์ ซึ่งแสดงคำแนะนำเครื่องมือเมื่อวางเมาส์เหนือองค์ประกอบและซ่อนไว้เมื่อมีการเรียกใช้เหตุการณ์ mouseout สำหรับการกำหนดสไตล์คำแนะนำเครื่องมือ ให้ใช้ปุ่ม “ สไตล์ ” แอตทริบิวต์ใน JavaScript ในบทความนี้ เราได้แสดงตัวอย่างที่ดีที่สุดที่เป็นไปได้ในการสร้างคำแนะนำเครื่องมือโดยใช้ JavaScript ธรรมดา, JavaScript ด้วย CSS และคำแนะนำเครื่องมือที่ไม่มี JavaScript