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:

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