สคริปต์เครื่องมือคำแนะนำที่มีประโยชน์ 40+ ด้วย CSS, JavaScript และ jQuery

องค์ประกอบ UI ที่น่าสนใจเคล็ดลับเครื่องมือ (หรือที่เรียกว่า infotips) ทำให้กล่องเล็ก ๆ ปรากฏขึ้นเมื่อ เคอร์เซอร์ของเมาส์อยู่เหนือข้อความหรือรูปภาพที่มีข้อมูล เกี่ยวกับองค์ประกอบที่ถูกโฮเวอร์ ในแง่ของประสบการณ์การใช้งานคำแนะนำเครื่องมือให้ผู้ใช้แหล่งข้อมูลที่เร็วที่สุดและง่ายที่สุด โดยไม่ต้องคลิกอะไรเลย.

แม้ว่าวิธีที่ง่ายที่สุดในการเพิ่มเคล็ดลับเครื่องมือในข้อความของคุณคือการใช้แท็ก HTML หรือ TITLE =””, alt =””. อย่างไรก็ตามมีบางอย่างที่เจ๋งจริงๆ เคล็ดลับการออกแบบและสไตล์ของเครื่องมือที่คุณสามารถสร้างด้วย JavaScript และ CSS ใช้สคริปต์คำแนะนำเครื่องมือ ลองมาดูกัน.

CSS

Balloon.css - Balloon เป็นห้องสมุด CSS แต่งด้วย SasS และ LESS เพื่อแสดงคำแนะนำเครื่องมือแบบโต้ตอบ เนื้อหาและตำแหน่งของคำแนะนำเครื่องมือสามารถกำหนดค่าผ่านทาง ข้อมูล- คุณลักษณะ คุณสามารถแสดงคำแนะนำเครื่องมือทางด้านซ้ายขวาหรือซ้ายขวา คุณสามารถทำได้ เพิ่ม Emojis เข้ากับเนื้อหา. Balloon.css สามารถติดตั้งผ่าน NPM และหรือโหลดจาก CDNJS.

Simptip - ทำกับ SasS ช่วยให้ กำหนดค่าใหม่และคอมไพล์รหัสใหม่เพื่อให้เหมาะกับความต้องการของคุณ. ตำแหน่งคำแนะนำเครื่องมือและเนื้อหาสามารถกำหนดค่าผ่านชื่อคลาสและ ข้อมูลคำแนะนำเครื่องมือ คุณลักษณะ Simptip มีให้ในฐานะ แพ็คเกจ NPM, Yarn และ Bower.

Hint.css - หนึ่งในห้องสมุด CSS ยอดนิยมที่จะแสดงคำแนะนำเครื่องมือ Hint.css ถูกใช้โดยเว็บไซต์ยอดนิยมมากมายเช่น Fiverr, Webflow และ Tridiv ไม่เหมือนกับอีกสองไลบรารี CSS, Hint.css ใช้ เพลงฉลาก คุณสามารถกำหนดค่าขนาดและสีผ่านชื่อคลาส ใช้วิธีการ BEM Hint.css มีอยู่ใน NPM, Bower และ CDNJS.

Microtip - อีกหนึ่งห้องสมุด CSS ที่ยอดเยี่ยมสำหรับการสร้างคำแนะนำเครื่องมือที่สร้างขึ้นด้วย “การเข้าถึง” ในใจ Microtip การใช้งาน เพลงฉลาก เพื่อเก็บเนื้อหาเคล็ดลับเครื่องมือและ ข้อมูล- คุณลักษณะการกำหนดค่าขนาดคำแนะนำเครื่องมือและตำแหน่ง.

มันใช้ตัวแปร CSS ซึ่งให้คุณปรับแต่งคำแนะนำเครื่องมือด้วยไฟล์ ol ol 'CSS ธรรมดา ตัวแปร CSS ได้รับการสนับสนุนในหลาย ๆ เว็บและเบราว์เซอร์มือถือแล้ว Microtip มีให้ในรูปแบบ NPM, Yarn package และ UNPkg CDN.

Wenk - มันเป็นเพียง 733 ไบต์ ห้องสมุดที่มีน้ำหนักเบาสุด ๆ เขียนด้วย CSS ที่ทันสมัยโดยใช้ CSSNext, LESS และ SCSS ดังนั้นสามารถปรับแต่งและคอมไพล์สไตล์ตามที่คุณต้องการ Wenk สามารถดาวน์โหลดได้จาก NPM, Yarn และบริการ CDN ฟรีดังต่อไปนี้: rawgit.com และ unpkg.com.

Tooltippy - อื่น ห้องสมุด CSS น้ำหนักเบา มีขนาดเพียงประมาณ 1 KB Tooltippy มีธีมที่สร้างไว้ล่วงหน้าหลายอย่างสำหรับการจัดแต่งทรงผมทูลทิป มันเขียนด้วยโปรเซสเซอร์ CSS ล่วงหน้าชื่อ Stylus ดูคำแนะนำเกี่ยวกับวิธีการที่คุณสามารถ ขยายหรือปรับแต่งธีมเหล่านี้.

ElegantTips - ห้องสมุดนี้มาพร้อมกับบางอย่าง ธีมที่สร้างไว้ล่วงหน้า ที่สามารถเปลี่ยนแปลงได้ด้วยชื่อชั้นเรียนที่ให้ไว้ ไม่เหมือนกับห้องสมุดอื่น ๆ ที่ใช้ HTML5 ข้อมูล- หรือ เพลงฉลาก คุณลักษณะ, ElegantTips ต้องการองค์ประกอบพิเศษที่เพิ่มเข้ามาในรูปแบบเคล็ดลับเครื่องมือ สิ่งนี้ช่วยให้คุณ เพิ่มเนื้อหาใด ๆ ลงในคำแนะนำเครื่องมือนอกเหนือจากข้อความธรรมดา.

Tootik - ไม่เพียงแค่ที่ไลบรารี CSS นี้จัดเตรียม stylsheet ในรูปแบบ CSS, LESS และ SasS แต่ยังจัดเตรียม GUI ที่ใช้งานง่ายเพื่อปรับแต่งคำแนะนำเครื่องมือ. คุณสามารถคัดลอกและวาง HTML ที่สร้างโดยเครื่องมือนี้ มันง่ายมาก.

VanillaJS

TippyJS - ขับเคลื่อนโดย Popper.js TippyJS มาพร้อมกับ ตัวเลือกมากมายเพื่อกำหนดค่าคำแนะนำเครื่องมือ. เราสามารถปรับแต่งภาพเคลื่อนไหวลูกศรเคล็ดลับความกว้างขนาดชุดรูปแบบและอื่น ๆ อีกมากมาย นอกจากนี้ยังมีฟังก์ชั่นโทรกลับด้วยซึ่งคุณสามารถ ดำเนินการฟังก์ชั่นเมื่อคำแนะนำเครื่องมือจะแสดงและซ่อน. คุณสมบัติเหล่านี้ทำให้ TippyJS เป็นหนึ่งในไลบรารี JavaScript ที่มีประสิทธิภาพของเราในรายการของเราเพื่อสร้างคำแนะนำเครื่องมือ.

Darsain Tooltip - ไลบรารีนี้จัดเตรียมการใช้งานพื้นฐานของคำแนะนำเครื่องมือ ถึงกระนั้นก็มีตัวเลือกมากมายในการกำหนดค่าพฤติกรรม tootip และ ชุดชื่อคลาสเพื่อเปลี่ยนลักษณะที่ปรากฏของคำแนะนำเครื่องมือ. คำแนะนำเครื่องมือทำงานได้ดีในเบราว์เซอร์รุ่นเก่าเช่น IE9 และหากจำเป็น IE8 ที่มีการปรับแต่งเล็กน้อย.

Bubb - Bubb อาจเหมาะสำหรับผู้ใช้ JavaScript ขั้นสูง ใช้มัน API ที่กว้างขวางนอกเหนือจากการแสดงข้อความแบบง่าย, คุณสามารถเพิ่มเนื้อหา HTML ที่มีความซับซ้อนมากขึ้นไปยังคำแนะนำเครื่องมือโดยทางโปรแกรม มันเจ๋งมาก คุณสามารถอ้างถึงเอกสารตัวอย่าง.

ตกใจ - มีนามธรรมทางเทคนิคเพื่อสร้างสิ่งที่ “ปรากฏ”, เช่นคำแนะนำเครื่องมือป๊อปโอเวอร์และดรอปดาวน์. TippyJS ใช้เป็นพื้นฐานไลบรารีและใช้โดยชื่อใหญ่บนเว็บเช่น Bootstrap, Microsoft และ Atlassian.

เคล็ดลับเครื่องมือ YY - YY Tooltip ไม่เหมือนกับไลบรารีอื่น ๆ ไม่ต้องการให้คุณเพิ่มองค์ประกอบ HTML หรือแอตทริบิวต์. มันทำงานได้อย่างสมบูรณ์กับ JavaScript และเนื้อหาตำแหน่งและสีที่กำหนดไว้ในวัตถุแทนในองค์ประกอบ HTML มันสมบูรณ์แบบที่จะใช้ร่วมกับเว็บแอปพลิเคชัน JavaScript แบบเต็ม.

Position.js - อีกหนึ่งไลบรารี JavaScript ดั้งเดิมที่ยอดเยี่ยมในการสร้างคำแนะนำเครื่องมือ Position.js ให้ GUI เพื่อกำหนดค่าฟังก์ชันและเพียงคัดลอกและวางรหัสที่สร้างขึ้นที่นั่น. Position.js สามารถใช้ร่วมกับ React.js หรือ Vue.js.

เคล็ดลับเครื่องมือ Bezet - ห้องสมุดนี้ให้ 14 ตัวเลือกเพื่อแสดงคำแนะนำเครื่องมือ; เช่นใน ขวา, ซ้าย, ด้านล่าง, เหลือศูนย์, ขวาปลาย, ล่างตรงกลาง, เป็นต้นนอกจากนั้นมันยังฉลาดพอที่จะทำได้ ปรับตำแหน่งเคล็ดลับเครื่องมือตามพื้นที่ว่าง ล้อมรอบคำแนะนำเครื่องมือ ตรวจสอบตัวอย่าง.

MouseTip - ไลบรารี JavaScrtipt นี้จะสร้าง เคล็ดลับเครื่องมือที่จะเลื่อนไปตามตำแหน่งเคอร์เซอร์. เคล็ดลับเครื่องมือมีการกำหนดค่าที่ไม่ได้มาตรฐาน mousetip- คุณลักษณะแทนการใช้ HTML5 ข้อมูล- คุณลักษณะ Mousetip มีให้ในโมดูล NPM.

Internetips - ค่อนข้างคล้ายกับ MousetTip คำแนะนำเครื่องมือที่สร้างโดยไลบรารีนี้ ตามตำแหน่งเคอร์เซอร์. ทุกอย่างถูกกำหนดค่าผ่านทางวัตถุ JavaScript แทน HTML และ คุณลักษณะยังสร้างขึ้นสำหรับเบราว์เซอร์ที่ทันสมัย. มันเบาและเร็ว.

MTip - ไลบรารี JavaScript สำหรับคำแนะนำเครื่องมือด้วย เบราว์เซอร์ที่เข้ากันได้ดี. มันเข้ากันได้กับ IE8 ปรับแต่งได้อย่างเต็มที่ผ่านตัวเลือกและคุณสามารถเพิ่มคำแนะนำเครื่องมือเพื่อองค์ประกอบใด ๆ แม้ใน img (องค์ประกอบภาพ).

Bubblesee - ไลบรารี JavaScript ที่มีน้ำหนักเบาซึ่งจัดเตรียมฟังก์ชันการทำงานที่ตรงไปตรงมาของ “เคล็ดลับ”. ง่ายต่อการใช้ไลบรารี JavaScript โดยไม่มีตัวเลือกที่ซับซ้อนในการปรับแต่งเอาต์พุต มีไฟล์ Sass หากคุณต้องการเปลี่ยนลักษณะที่ปรากฏของคำแนะนำเครื่องมือ ตรวจสอบตัวอย่าง.

Tipfy - สร้างด้วยไวยากรณ์ JavaScript ที่ทันสมัย ​​ES6, Tipfy มีขนาดเพียง 2 KB. ไลบรารีมีไฟล์สองเวอร์ชัน: tipfy.min.js การจัดทำสคริปต์ด้วย ไวยากรณ์ ES6 ที่ทันสมัย, และ tipfy.es5.min.js ถ้าคุณต้องการความเข้ากันได้กับเบราว์เซอร์รุ่นเก่า มันใช้ ข้อมูล- คุณลักษณะเพื่อปรับแต่งคำแนะนำเครื่องมือ; ข้อมูล tipfy ด้าน, ตัวอย่างเช่นใช้เพื่อกำหนดทิศทางคำแนะนำเครื่องมือและใช้ ข้อมูล tipfy ข้อความ คุณลักษณะเพื่อเพิ่มเนื้อหาคำแนะนำเครื่องมือ.

jQuery

Tooltipster - ห้องสมุดนี้มีตัวเลือกมากมายในการปรับแต่งเกือบทุกอย่างเช่น ชุดรูปแบบภาพเคลื่อนไหวการสนับสนุนระบบสัมผัสเนื้อหาทริกเกอร์แบบเปิดและปิด, เป็นต้นนอกจากนี้ยังมีฟังเหตุการณ์ที่กำหนดเองและการโทรกลับช่วยให้นักพัฒนาขยายคำแนะนำเครื่องมือด้วยฟังก์ชั่นที่กำหนดเอง นอกจากนี้การเป็นปลั๊กอิน jQuery คำแนะนำเครื่องมือจะทำงานในเบราว์เซอร์รุ่นเก่าเช่น IE6 ขึ้นอยู่กับรุ่น jQuery กำลังใช้.

protip - อีกปลั๊กอิน jQuery ที่ครอบคลุม Protip รองรับ 49 ตำแหน่ง, HTML สำหรับเนื้อหาเคล็ดลับเครื่องมือการสนับสนุนไอคอนการโทรกลับที่กำหนดเอง, และอีกมากมาย Protip มี GUI ที่ให้คุณปรับแต่งคำแนะนำเครื่องมือได้อย่างง่ายดาย.

PowerTip - ปลั๊กอิน jQuery นี้ยังนำตัวเลือกและ API ที่ให้นักพัฒนามีวิธีการที่หลากหลายในการนำเครื่องมือคำแนะนำไปใช้ มันรองรับ การนำทางคีย์บอร์ด; ทำให้ป๊อปอัพปรากฏขึ้นเมื่อนำทางองค์ประกอบด้วย แถบ แป้นพิมพ์ PowereTip คือ พร้อมใช้งานเป็นโมดูล NPM. มันสามารถใช้กับ RequireJS และ Browserify.

เคล็ดลับเครื่องมือ Aria ที่สามารถเข้าถึงได้ - ปลั๊กอิน jQuery พร้อมคุณสมบัติการช่วยการเข้าถึงในตัวคำแนะนำคือ ออกแบบมาเพื่อแสดงกล่องโต้ตอบที่มีชื่อหลายข้อความและปุ่มปิด. มันเป็นหนึ่งในรายการของเราเอง.

TipsJS - ปลั๊กอิน jQuery ง่าย ๆ แต่ก็มีคุณสมบัติที่โดดเด่นมาก เนื้อหาคำแนะนำเครื่องมือถูกตั้งค่าด้วย ข้อมูลคำแนะนำเครื่องมือ คุณลักษณะ. สิ่งที่มากกว่านั้นคือเราสามารถห่อเนื้อหาด้วยอักขระพิเศษเพื่อจัดรูปแบบเนื้อหาคล้ายกับการจัดรูปแบบ Markdown เราสามารถใช้ * * * * เพื่อทำให้เนื้อหาเป็นตัวหนา, ~ สำหรับตัวเอียงและ ^ สำหรับหัวเรื่อง.

คำแนะนำเครื่องมือเข้ม - ไลบรารีนี้มีคุณสมบัติที่มีประโยชน์จริง ๆ เพื่อเพิ่มพลังให้กับคำแนะนำเครื่องมือ ตัวอย่างเช่นเราสามารถเพิ่ม ปุ่มยืนยัน - ใช่และไม่ใช่หรี่พื้นหลังในขณะที่คำแนะนำเครื่องมือแสดงขึ้นและเพิ่มองค์ประกอบ HTML กับเนื้อหา ฉันคิดว่าคุณควรตรวจสอบหน้าตัวอย่าง.

Aria Tooltip - เคล็ดลับเครื่องมืออื่นที่มีคุณสมบัติการช่วยการเข้าถึงในตัวปลั๊กอิน jQuery นี้เป็นไปตามมาตรฐาน WAI-ARIA 1.1 มันตอบสนองในแบบที่คุณทำได้ จัดเตรียมคอนฟิกูเรชันที่แตกต่างกันสำหรับขนาดวิวพอร์ตที่แตกต่างกัน. Aria Tooltip มีให้ในโมดูล NPM เสื้อ Aria-เคล็ดลับ.

Toolbar.js - ในขณะที่ปลั๊กอิน jQuery อื่น ๆ อาจแสดงเฉพาะข้อความธรรมดาหรือเนื้อหา HTML ภายในคำแนะนำเครื่องมือนี้ ปลั๊กอิน jQuery สร้างแถบเครื่องมือ. เคล็ดลับเครื่องมือจะมีลิงก์อย่างน้อยสองลิงก์ที่มีไอคอนซึ่งโดยทั่วไปแล้วจะมีการดำเนินการ คลิก, เหมือนแถบเครื่องมือใด ๆ ตรวจสอบเอกสารและตัวอย่าง.

VueJS

V-เคล็ดลับ - V-Tooltip เป็นส่วนประกอบ Vue.js ขับเคลื่อนโดย Popper.js ภายใต้ประทุน มันให้ คำสั่งใหม่ชื่อ V-เคล็ดลับ ซึ่งสามารถเพิ่มในองค์ประกอบใด ๆ เพื่อสร้างคำแนะนำเครื่องมือ. V-เคล็ดลับ อาจมีเนื้อหาเคล็ดลับเครื่องมือหรือตัวเลือก นอกเหนือจากที่กำหนดเอง V-เคล็ดลับ คำสั่งคุณยังสามารถเพิ่มคำแนะนำเครื่องมือด้วย V-popover ส่วนประกอบ ด้วยองค์ประกอบนี้คุณสามารถ เพิ่มเนื้อหาที่ซับซ้อนมากขึ้นในคำแนะนำเครื่องมือ ด้วยองค์ประกอบ Vue.js หรือ HTML.

คำแนะนำเครื่องมือ Vue-Bulma - ส่วนประกอบ Vue.js เพื่อสร้างคำแนะนำเครื่องมือตาม Bulma UI Framework ไลบรารีนี้เป็นส่วนหนึ่งของ Vue Bulma แต่ tooltip component มีอยู่ในชื่อ NPM module vue-Bulma-เคล็ดลับ ที่คุณสามารถใช้สิ่งนี้เป็นส่วนประกอบแบบสแตนด์อโลน.

วู-Directive-เคล็ดลับ - โดยรวมแล้วมันคล้ายกับส่วนประกอบ V-Tooltip โดยใช้ Popper.js และให้คำสั่งเดียวกันที่เรียกว่า V-เคล็ดลับ. อย่างไรก็ตามมันดูเหมือนจะไม่ได้ให้ V-popover ส่วนประกอบ.

วู-Tippy - ไลบรารีนี้ล้อม Tippy.js ไว้ในองค์ประกอบ Vue.js มันมีคำสั่ง Vue.js ที่กำหนดเองที่เรียกว่า V-Tippy ที่ทำงานเหมือนแอตทริบิวต์ HTML; เราสามารถเพิ่มเนื้อหาสำหรับคำแนะนำเครื่องมือหรือตัวเลือกในการปรับแต่ง นอกจากนี้ยังแสดงผล คอมโพเนนต์ Vue.js ที่กำหนดเองบนเนื้อหาคำแนะนำเครื่องมือโดยใช้ HTML ตัวเลือก.

VueJS-popover - Vue.js ที่กำหนดเองพร้อมกับคำสั่งที่กำหนดเองที่เรียกว่า V-popover และสององค์ประกอบที่กำหนดเองคือ และ ให้ความยืดหยุ่นสำหรับนักพัฒนาเพื่อเพิ่มคำแนะนำเครื่องมือในแอปพลิเคชัน Vue.js.

วู-คำแนะนำ - ปลั๊กอิน Vue.js ที่ล้อม Hint.css คุณสมบัติปลั๊กอิน V-หรือคำ CSS คำสั่งเพื่อเพิ่มคำแนะนำเครื่องมือ มัน นำชุดตัวเลือกชุดเดียวกันกับ Hint.css, เพื่อให้คุณสามารถเพิ่มพวกเขาเป็นวัตถุ JavaScript หรือปรับปรุง Vue.js.

ReactJS

ตอบโต้ Joyride - องค์ประกอบการตอบสนองเพื่อแสดงชุดเคล็ดลับเครื่องมือที่จะ แนะนำผู้ใช้ใหม่ให้คุ้นเคยกับแอปพลิเคชันใหม่ของคุณ.

ทำปฏิกิริยาลอยน้ำ - ไลบรารีนี้ล้อม Popper.js ไว้ในองค์ประกอบ React ชื่อ Floater ดังนั้นจึงมีคุณสมบัติที่ยอดเยี่ยมเช่นเดียวกับ Floater คุณสามารถเพิ่มคำแนะนำเครื่องมือและป๊อปอัพและคุณยังสามารถ เล่นกับส่วนนี้ ผ่านแซนด์บ็อกซ์นี้.

ตอบกลับอัตโนมัติ - องค์ประกอบ React อย่างง่ายพร้อมคุณสมบัติการระบุตำแหน่งอัตโนมัติ eact Autotip จะ ปรับตำแหน่งของคำแนะนำเครื่องมือโดยอัตโนมัติ เมื่อพื้นที่ว่างรอบ ๆ มันเปลี่ยนไป.

ตอบสนอง Tippy - สร้างขึ้นจาก Tippy.js และ Popover.js ห้องสมุดนี้แนะนำ เคล็ดลับ องค์ประกอบที่ คุณสามารถรวมไว้ในแอปพลิเคชันตอบโต้ของคุณ.

ตอบสนองคำแนะนำ - ส่วนประกอบ React ขยาย Hint.css ส่วนประกอบเพิ่มคุณสมบัติบางอย่างที่ไม่สามารถใช้ได้ใน Hint.css เช่น ตำแหน่งอัตโนมัติล่าช้าและฟังก์ชั่นการโทรกลับ.

มากกว่า

คำแนะนำเครื่องมือถ่าน - องค์ประกอบ Ember.js สำหรับการสร้างคำแนะนำเครื่องมือมันถูกสร้างขึ้นที่ด้านบนของ Popper.js องค์ประกอบได้รับการออกแบบโดยคำนึงถึงการช่วยสำหรับการเข้าถึงและยังคงปรับปรุงเพื่อให้สอดคล้องกับการตอบสนองประมาณ 508 เรื่องในเรื่องนี้.

เคล็ดลับ D3 - ปลั๊กอิน D3.js D3.js เป็นไลบรารี JavaScript สำหรับการสร้างภาพข้อมูลเช่นแผนภูมิแผนที่ไดอะแกรม ฯลฯ ปลั๊กอินนี้ช่วยให้คุณแสดงคำแนะนำเครื่องมือที่ด้านบนของข้อมูลเหล่านี้.