an Easy-to-use tooltip system that has a nice interface for both users and developers!
on any workflow you're working, you may have access to load some files into it. so include css and js of tipIt. but there's just one point:
If you want to use automatic tooltip making, you should put the script tag before closing
</body>
sample:
<head>
<!-- .... -->
<link rel="stylesheet" href="dist/css/tipit.css" />
<!-- .... -->
</head>
<body>
<!-- .... -->
<script src="dist/js/tipit.js"></script>
</body>
using NPM:
npm i tipit-native
makeTipit = require( 'tipit-native' );
// or
import makeTipit from 'tipit-native';
and for css files ( stylus syntax ):
@require 'path-to-node_modules/tipit-native/dist/css/tipit.css'
or any other workflow you're using. Just make sure relative css file is included in your page.
assume you want to add tooltip on a <div> element; so:
<div data-tipit-content="Hey there!"></div>
it'll work like a charm! and by default, placement of tooltip is left-side of element. if you're planning to change that, don't worry:
<div data-tipit-content="Hey there!" data-tipit-placement="right">
and it'll work like another charm :)).
if you wanna make tooltips on your own timing ( like, after some ajax loaded and blah blah blah ), you could use:
// native version
makeTipit( someElement );
// jQuery version
someElement.tipit();
You have to write configs of that element as mentioned here
automatically or manually, tooltips got made. now you've access to two methods:
someElement.showTipit();
someElement.hideTipit();
to force visibility of a tooltip.
Since the other version at anetwork/tipit is not maintaining anymore, I make new changes to this repository. Consider this repo as main.