myTooltip 
Powerful and modern jQuery plugin for create tooltips!
Install
$ npm install my-tooltip --saveStart
Include the CSS file
<link rel="stylesheet" href="node_modules/my-tooltip/src/myTooltip.css">Include the JS file
<script src="node_modules/my-tooltip/src/myTooltip.js"></script>use requirejs
require('myTooltip');Usage
<script> $(document).ready(function() { $('.js-mytooltip').myTooltip({ 'offset': 15, 'theme': 'light' }); }); </script>Options
Options list:
| Name | Description | Expected type | Default Value |
|---|---|---|---|
| direction | Direction of tooltip relative to the element | String | 'top' |
| offset | Offset in px of tooltip relative to the element | Number | 10 |
| border | Border offset tooltip | String | 'closer' |
| content | Present content | String | '' |
| dinamicContent | Ability to change content | Boolean | false |
| action | Javascript handlers to call tooltip: hover, click, focus | String | 'hover' |
| theme | Ready-to-use themes | String | 'default' |
| customClass | Add custom class to the current tooltip | String | '' |
| ignoreClass | Add class to element to ignore call | String | 'js-mytooltip-ignore' |
| widthOfParent | Width of the parent element in procent | Number | false |
| disposable | Disposable call and remove element | Boolean | false |
| fromTitle | Take content from native title attributes | Boolean | false |
| showArrow | Show arrow current tooltip | Boolean | true |
| cursorHelp | show cursor helper to element | Boolean | false |
| hideTime | Hide timer tooltip | Number | false |
| hoverTooltip | Ability hover mouse on tooltip | Boolean | true |
| animateOffsetPx | Animation offset in px | Number | 15 |
| animateDuration | Animation speed in mc | Number | 200 |
| debug | Debug report from console except public method and jQuery fn | Boolean | false |
Options data-attributes
All options are supported in the format data attr, uppercase symbol replace delimiter. Example:
- direction: 'left' -> data-mytooltip-direction = "left"
- hideTime: 1000 -> data-mytooltip-hide-time = "1000"
- hoverTooltip: false -> data-mytooltip-hover-tooltip = "false"
- etc
Content
- Javascript option:
<script> $('.js-mytooltip-content').myTooltip({ 'content': '<a href="https://en.wikipedia.org/wiki/Mars" target="_blank">read more</a>' }); </script>- Html data attributes:
<div class="js-mytooltip-content" data-mytooltip-content="<a href="https://en.wikipedia.org/wiki/Mars" target="_blank">read more</a> </div>- Dom container:
<div class="js-mytooltip-content" data-mytooltip-content=".wrapper-content"></div> <div class="wrapper-content" <a href="https://en.wikipedia.org/wiki/Mars" target="_blank">read more</a></div>Action
data-mytooltip-action="${action}"
$('.selector').myTooltip({ 'action': ${action} });Actions list:
- hover
- click
- focus
Events
Events list:
show-before - start show tooltip
show-complete - end show tooltip
hide-before - start hide tooltip
hide-complete - end hide tooltip
<script> $('.js-mytooltip').on('show-before', function(event) { console.log('show-before!') }); $('.js-mytooltip').on('show-complete', function(event, content) { console.info(content); console.log('show-complete!'); }); $('.js-mytooltip').on('hide-before', function(event) { console.log('hide-before!'); }); $('.js-mytooltip').on('hide-complete', function(event) { console.log('hide-complete!'); }); </script>Public methods
Call - show current tooltip
<script> setTimeout(function() { $('.js-mytooltip').myTooltip('call'); }, 300); </script>Update - update storage myTooltip for dynamic elements
<script> $('.js-mytooltip').myTooltip('update'); </script>Destroy - remove current tooltip from myTooltip
<script> $('.js-mytooltip').myTooltip('destroy'); </script>updateContent - update content current tooltip (need to install option dinamicContent in true)
<script> $('.js-mytooltip').myTooltip('updateContent', new Content); </script>Browser Support
All modern browsers and IE9+
Example
See detail example - myTooltip
