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	벨트 구성 요소	component (기본값 : null )
content.props	모든 구성 요소 속성	object (기본값 : null )

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

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

테마

여러 방법을 사용하여 툴팁 테마를 사용자 정의 할 수 있습니다.

• 모든 CSS 변수를 포함하는 theme 속성을 통해 테마 클래스 이름을 지정합니다.
• style 속성을 사용하여 직접 재정의를 정의하십시오
• 전 세계적으로 CSS 변수를 무시하십시오

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

changelog

changelog

특허

MIT