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

Demo

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 = require('ZTooltip');
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