亚里士多德工具提示
一个高度定制和容易使用的方法 在您的网站上插入亚里士多德授权定义!
特征
- : havy check mark:可适应:使用任何亚里士多德元数据注册!
- : globe with meridians: IE11+ 支持 * 联合国 数字 : 兼容99%的桌面和98%的移动用户.
- :mouse: Light:重量仅为60kb,包括图像资产.
- :dog:Dogfooded:这个库被用在我们制作的"亚里士多德注册"中. 更新保证!
示例
快速启动
软件包管理器
安装天平- 工具提示包 :
frankie@aristotle:~$ npm i @aristotle-metadata-enterprises/aristotle_tooltip
在申请中,导入 aristotle_tooltip 模块和核心 css:
import aristotleTooltip from '@aristotle-metadata-enterprises/aristotle_tooltip'
import 'aristotle_tooltip/dist/tooltip.css'
假设你用的是 Webpack, Rollup 或 Parcel 等模块捆绑器.
光盘N
<script src="https://cdn.jsdelivr.net/npm/@aristotle-metadata-enterprises/aristotle_tooltip@latest/dist/aristotletooltip.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aristotle-metadata-enterprises/aristotle_tooltip@latest/dist/tooltip.css">
将脚本放在底部 <body>。它必须放在您自己的脚本上,因为下面的 Tipy.js 库会添加工具提示.
使用量
要在您的网页上添加一个内容的工具提示 :
A <a href="#" data-aristotle-concept-id="498427">person</a> is known by the company they keep
亚里士多德链接的自定义样式可以通过应用瞄准的 CSS 规则来设置 属性装饰器数字 :
a[data-aristotle-concept-id] {
border-bottom: 1px dotted #155799;
}
a[data-aristotle-concept-id]:hover {
text-decoration: none;
border-bottom: 1px solid #155799;
}
设置
let options = {
'url': 'https://registry.aristotlemetadata.com',
'definitionWords': 50,
'longDefinitionWords': 75,
};
aristotleTooltip(options);
选项
| 选项 | 默认 | 解释 |
|---|---|---|
url | registry.aristotlemetadata.com | 亚里士多德元数据登记册的 URL |
definitionWords | 第50条 | 初始弹出时要显示的字数 |
longDefinitionWords | 第75条 | 按下“ 见更多...” 时要显示的单词数 |
placement | bottom | 工具提示的定位 |
trigger | mouseenter focus | 用于触发工具提示的事件 |
externalLinkVisible | true | 是否在元数据项名称旁边显示外部链接图标 |
selector | document.body | 用于在此元素下创建工具提示的元素或 css 选择器, 不在此元素下的工具提示将被忽略 |
interactive | true | 是否显示链接等交互式内容 |
建立发展环境
我们是一个开放源代码项目,欢迎任何新的贡献. 为了建立一个开发环境, 简单的叉出回波, 克隆它的地方 aristotle-tooltip 项目, 运行 :
oscar@aristotle:~$ npm install
oscar@aristotle:~$ npm run build:dev
IE11 兼容性
IE11 兼容性需要保证多填充.aristotle-tooltip 已经测试与 ES6承诺
ES6 承诺提供CDN
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.js"></script>