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});
Work with module bundler
var ZTooltip = ;;
Attribute
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"
为元素添加另外的触发方式。
LICENSE
MIT © zhiyul