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 >