myTooltip

Powerful and modern jQuery plugin for create tooltips!

Install

$ npm install my-tooltip --save

Start

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