easy-tip

遇到过文字溢出用户hover时才展示弹框的场景吗？easy-tip轻松帮你解决！

Demo

快速开始

• 安装

npm install easy-tip --save

或

yarn add easy-tip

• 简单使用（ 两行代码即可完成基本功能）

import EasyTip from 'easy-tip';

const eastTip = new EasyTip(options); // 初始化实例, options参数在下表，可选

eastTip.init();// 开始执行，只要出现文字溢出的情况的都会出现弹层进行提示

• 可选参数options

参数	类型	默认值	说明
effectiveArea	HTMLElement｜Document，可选	Document	实例作用的区域，默认全局
customStyle	CustomStyle，可选	-	覆盖弹框和三角指示标的样式，下面详解参数
mustDisplaySign	String，可选	-	必定触发展示的标记，如传入"test", 则在需要的元素dataset上写入你传的key 值为true即可。如：
needEffectiveSign	Boolean，可选	false	只对标记的元素计算弹框是否展示，传入true后，在需要EasyTip计算的元素打上标记，如： ,
triggerEvent	"mouse"|"click"|"select"，可选	mouse	触发的时机，mouse为鼠标移入，click为点击展示，select为选中文本内容
direction	"vertical" | "horizontal"，可选	vertical	弹框展示的位置，vertical：上下， horizontal： 左右， 默认在上下展示
contentRender	Function，函数返回了当前文本内容和触发元素两个参数，可选	-	自定义渲染内容，需要返回htmlElement 或者 dom字符串片段

• customStyle

参数	类型	默认值	说明
wrap	css样式，可选	-	最外层弹框的样式
triangle	css样式，可选	-	三角指示标的样式

例子：

const eastTip = new EasyTip({
  customStyle: {
    wrap:{ backgroundColor: 'white', maxWidth: '200px'} //最外层弹框的样式 
    triangle: { backgroundColor: 'white'} // 三角指示标的样式
  }
}); 

• API

init, 初始化EasyTip

import EasyTip from 'easy-tip';

const eastTip = new EasyTip(options); 
eastTip.init();// 初始化后才会开始计算弹框

destroy，销毁EasyTip

import EasyTip from 'easy-tip';

const eastTip = new EasyTip(options); 
eastTip.init();

.....

eastTip.destroy();

hide，隐藏弹框

import EasyTip from 'easy-tip';

const eastTip = new EasyTip(options); 
eastTip.init();

.....
//当触发弹框后，若用户想自己手动关闭弹框可调用
eastTip.hide();

---

自定义使用

该功能主要使用在一些需要定制化弹窗功能的元素，换句话说easy-tip只提供计算好位置的弹框给你，其余都交给使用者定义（渲染时机，内容等）。

• 接入

import EasyTip from 'easy-tip';

// 接入方式同上，主要传参有区别
const eastTip = new EasyTip(options); 

eastTip.init();

• options参数

参数	类型	默认值	说明
effectiveArea	HTMLElement	-	实例作用的元素
customStyle	CustomStyle，可选	-	同上
triggerEvent	"mouse"|"click"|"select"｜"none"，可选	mouse	触发的时机，mouse为鼠标移入，click为点击展示，select为选中文本内容, none: 不绑定触发时机
direction	"vertical" | "horizontal"，可选	vertical	弹框展示的位置，vertical：上下， horizontal： 左右， 默认在上下展示
custom	必选，一些自定义的参数		必选，一些自定义的参数，下面详解

• custom

参数	类型	默认值	说明
byTextOverflow	Boolean，可选	False	是否根据文字溢出来决定是否展示
canDisplay	Function: () => boolean，可选	-	用户传一个返回布尔值的函数，为true时，才能够展示。方便用户决定某些时机不需要展示
contentRender	Function，函数返回了当前文本内容和触发元素两个参数，可选	-	自定义渲染内容，需要返回htmlElement 或者 dom字符串片段

• API（自定义模式下比简单模式多了2个API）

display，展示弹框，位置默认根据你传入的effectiveArea，可手动传入元素更改位置，如下：

import EasyTip from 'easy-tip';

// 接入方式同上，主要传参有区别
const eastTip = new EasyTip(options); 

eastTip.init();


eastTip.show()；
// 或者

eastTip.show(document.getElementId('demo'))；// 弹幕展现在你想出现的元素上，位置EasyTip会自动重新计算
    

autoDisplayOrHide，自己判断是开or关🆚弹框，位置默认根据你传入的effectiveArea，可手动传入元素更改位置，如下：

import EasyTip from 'easy-tip';

// 接入方式同上，主要传参有区别
const eastTip = new EasyTip(options); 

eastTip.init();


eastTip.autoDisplayOrHide()； // 当弹框展开的时候再次执行则关闭，关闭的时候执行则打开
// 或者
eastTip.show(document.getElementId('demo'))；// 弹幕展现在你想出现的元素上，位置EasyTip会自动重新计算
    

init，destroy，hide方法 同上

• 自定义使用例子

// <div id="demo">自定义</div>

import EasyTip from 'easy-tip';

// 接入方式同上，主要传参有区别
const eastTip = new EasyTip({
  effectiveArea： document.getElementById('demo'),
  triggerEvent: 'mouse',
  custom: {
    contentRender: (str, el) => `<div>123123213${str}</div>`,
  }  
}); 

eastTip.init();

eastTip.show()；

本项目长期维护更新，有建议或者发现bug欢迎互相交流

希望能够帮助到你

开源协议

easy-tip遵循MIT开源协议