#ZTooltip
A simple tooltip made by pure javascript,working on most browsers includes IE6.It's very befitting to be used in a simple single page.The tooltip will adjusts it's position to make sure that is in the viewport.
无任何依赖,兼容绝大部分浏览器包括IE6,很适合简单的活动页使用。tooltip显示时会自动调整出现位置以保证自身始终处于浏览器视口范围内。
##Introduction
Screenshot
##Install
$ npm install ztooltip
##Usage
###HTML
<link rel="stylesheet" href="ZTooltip.min.css">
<!-- ... -->
<a data-tooltip="show" data-content="This is a button!">Hover</a>
<a data-tooltip="show" data-trigger="click" data-content="You catch me!">Click</a>
<!-- ... -->
<script src="ZTooltip.min.js"></script>
###JS
ZTooltip({
width: 200, // Optional tooltip width, default 200px
height: 100, // Optional tooltip height, default auto
boxOffsetX: 70, // Optional tooltip offsetX, default 20px
boxOffsetY: 7, // Optional tooltip offsetY, default 5px
arrowSize: 10, // Optional size of tooltip's arrow, default 10px
trigger: 'click' // Optional trigger method, default hover
});
var ZTooltip = require('ZTooltip');
ZTooltip({...});
You need add data-tooltip="show"
to the element which you want to trigger tooltip.The Attribute data-content=xxx
provides words in the tooltip.You can also set data-trigger="click/hover"
to add another way to trigger tooltip of the element.
你需要给触发tooltip的元素添加 data-tooltip="show"
属性, data-content="xxx"
里添加tooltip里显示的文字。可以通过 data-trigger="click/hover"
为元素添加另外的触发方式。
MIT © zhiyul