Skip to content

maxulyanov/myTooltip

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

47 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

myTooltip npm npm

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