tooltips下載 - tooltips源代碼下載

tooltips

三方組件

v3.0.1

下載

@Svelte-Plugins/Tooltips

一個簡單的工具提示動作和專為Svelte設計的組件。

在Svelte Repp中嘗試一下。

安裝

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和props的字符串或對象	`string`
延遲	毫秒的動畫延遲適用於工具提示	`number` （默認： `200` ）
hideonclickoutside	發生外部點擊時隱藏工具提示	`boolean` （默認： `false` ）
maxwidth	工具提示內容的最大允許寬度	`number` （默認： `200` ）
位置	工具提示應相對於其父的位置	`string` （默認： `top` ）
展示	允許您手動控制工具提示可見性	`boolean` （默認： `false` ）
風格	包含主題變量的對象覆蓋	`object` （默認： `null` ）
主題	CSS主題類名稱	`string` （默認：``）

使用組件作為內容

支柱	描述	價值
content.component	Svelte組件	`component` （默認： `null` ）
content.props	任何組件propeties	`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 >