tooltips

@svelte-plugins/คำแนะนำเครื่องมือ

การกระทำของคำแนะนำเครื่องมือง่าย ๆ และส่วนประกอบที่ออกแบบมาสำหรับ Svelte

ลองใช้ใน Svelte Repl

ติดตั้ง

yarn add @svelte-plugins/tooltips

# or with NPM

npm i @svelte-plugins/tooltips

# or with PNPM

pnpm i @svelte-plugins/tooltips

ใช้ส่วนประกอบคำแนะนำเครื่องมือ

< script >
  import { Tooltip } from " @svelte-plugins/tooltips " ;
</ script >

< Tooltip content = " Hello world! " >
 Check out my tooltip
</ Tooltip >

การใช้คำแนะนำเครื่องมือเครื่องมือ

< script >
  import { tooltip } from " @svelte-plugins/tooltips " ;
</ script >

Checkout out my < u title = " Hello World! " use:tooltip >tooltip</ u >

Checkout out my < u use:tooltip ={{ content : ' Hello World! ' }}>tooltip</ u >

API

อุปกรณ์ประกอบฉาก

ข้อต่อ	คำอธิบาย	ค่า
การกระทำ	การกระทำที่กระตุ้นคำแนะนำเครื่องมือ (โฮเวอร์	คลิก
ความเคลื่อนไหว	ภาพเคลื่อนไหวที่จะนำไปใช้กับคำแนะนำเครื่องมือ	string (ค่าเริ่มต้น: ``)
ลูกศร	หาก false ลูกศรคำแนะนำเครื่องมือจะไม่ปรากฏขึ้น	boolean (ค่าเริ่มต้น: true )
การวางตำแหน่งอัตโนมัติ	ปรับตำแหน่งคำแนะนำเครื่องมือหากการตัดวิวพอร์ตเกิดขึ้น	boolean (ค่าเริ่มต้น: false )
เนื้อหา	สตริงหรือวัตถุที่มี ComponentRef และอุปกรณ์ประกอบฉาก	string
ล่าช้า	ความล่าช้าของภาพเคลื่อนไหวในมิลลิวินาทีเพื่อใช้กับคำแนะนำเครื่องมือ	number (ค่าเริ่มต้น: 200 )
HideonClickoutside	ซ่อนคำแนะนำเครื่องมือเมื่อมีการคลิกภายนอกเกิดขึ้น	boolean (ค่าเริ่มต้น: false )
MaxWidth	ความกว้างที่อนุญาตสูงสุดของเนื้อหาคำแนะนำเครื่องมือ	number (ค่าเริ่มต้น: 200 )
ตำแหน่ง	ตำแหน่งที่คำแนะนำเครื่องมือควรปรากฏเมื่อเทียบกับพาเรนต์	string (ค่าเริ่มต้น: top )
แสดง	ช่วยให้คุณสามารถควบคุมการมองเห็นคำแนะนำเครื่องมือด้วยตนเองได้ด้วยตนเอง	boolean (ค่าเริ่มต้น: false )
สไตล์	วัตถุที่มีตัวแปรธีมแทนที่	object (ค่าเริ่มต้น: null )
ธีม	ชื่อคลาสธีม CSS	string (ค่าเริ่มต้น: ``)

การใช้ส่วนประกอบเป็นเนื้อหา

ข้อต่อ	คำอธิบาย	ค่า
content.component	องค์ประกอบ svelte	component (ค่าเริ่มต้น: null )
เนื้อหา. props	ส่วนประกอบใด ๆ	object (ค่าเริ่มต้น: null )

< script >
  import ComponentAsTooltip from ' ./ComponentAsTooltip ' ;
</ script >

Checkout out my < span use:tooltip ={{ content : { component : ComponentAsTooltip , props : { title : ' Hello World! ' } } }}>tooltip</ span >

การสร้างธีม

คุณสามารถปรับแต่งธีมเคล็ดลับเครื่องมือโดยใช้หลายวิธี:

• กำหนดชื่อคลาสธีมผ่านคุณสมบัติ theme ที่มีตัวแปร CSS ทั้งหมดของคุณแทนที่
• กำหนดการแทนที่โดยตรงโดยใช้คุณสมบัติ style
• แทนที่ตัวแปร CSS ทั่วโลก

Tooltip CSS ตัวแปร:

 --tooltip-arrow-size : 10 px ;
--tooltip-background-color : rgba ( 0 , 0 , 0 , 0.9 );
--tooltip-border-radius : 4 px ;
--tooltip-box-shadow : 0 1 px 20 px rgba ( 0 , 0 , 0 , 0.25 );
--tooltip-font-family : -apple-system , BlinkMacSystemFont , 'Segoe UI' , Roboto , Oxygen-Sans , Ubuntu , Cantarell ,
  'Helvetica Neue' , sans-serif;
--tooltip-font-size : 14 px ;
--tooltip-font-weight : 500 ;
--tooltip-line-height : 1.25 rem ;
--tooltip-color : # fff ;
--tooltip-offset-x : 12 px ;
--tooltip-offset-y : 12 px ;
--tooltip-padding : 12 px ;
--tooltip-white-space-hidden : nowrap;
--tooltip-white-space-shown : normal;
--tooltip-z-index : 100 ;

ใช้คุณสมบัติธีม

// action
< span title = "hello world!" use:tooltip ={{ theme : ' custom-tooltip ' }}>Hover over me</ span >

// component
< Tooltip content = " hello world! " theme = " custom-tooltip " >Hover over me</ Tooltip >

< style >
  :global( .tooltip.custom-tooltip ) {
    --tooltip-background-color : hotpink ;
    --tooltip-box-shadow : 0 1 px 8 px pink ;
  }
</ style >

ใช้คุณสมบัติสไตล์

// action
< span title = "hello world!" use:tooltip ={{ style : { backgroundColor : ' blue ' , borderRadius : ' 10px ' } }}>Hover over me</ span >

// component
< Tooltip content = "hello world!" style ={{ style : { backgroundColor : ' blue ' } }}>Hover over me</ Tooltip >

การเปลี่ยนแปลง

การเปลี่ยนแปลง

ใบอนุญาต

มิกซ์