Versatile Tooltip JavaScript Plugin – TCtooltip

Preview:

Description:

A pure javascript tooltip plugin that aims to be simple, customizable, with no dependencies and no inline styles.

Features:

• Extract content from the title attribute.
• Slide and Fade animations.
• Smart auto positioning.
• Custom CSS styles.

How to use it:

1. Import the tctooltip.min.js script into the document.

<script src="tctooltip.min.js"></script>

2. Initialize the tctooltip plugin.

document.addEventListener('DOMContentLoaded', function(){
  tctooltip({
    // options here
  });
}, false);

3. Add the CSS class to the target element and define the tooltip content in the title attribute. Enjoy.

<span class="tooltip" title="This is TCtooltip">
  Hover Me
</span>

4. Override the default styles of the tooltip.

tctooltip({
  cssOuter: {
    padding:'3px',
    'background-color':'transparent',
    'z-index':1000,
    opacity:'0',
    display:'inline-block',
    position:'absolute'
  },
  cssInner: {
    padding:'8px',
    'background-color':'#000',
    color:'#fff',
    'font-size':'12px',
    'font-family':'arial, sans-serif',
    'text-align':'left',
    'border-radius':'8px',
    opacity:'1',
    'box-sizing':'border-box',
    display:'inline-block',
    position:'relative',
    top:'0px',
    bottom:'0px',
    left:'0px',
    right:'0px'
  };
});

5. Override the default CSS selectors.

tctooltip({
  trigger:'tooltip',
  container:'tctooltip-box',
  content:'tctooltip-content',
});

6. Set the position of the tooltip. Default: ‘cursor’.

tctooltip({
  // 'above', 'below', 'left', 'right'
  position:'cursor',
});

7. Set the position of the tooltip. Default: ‘cursor’.

tctooltip({
  // 'above', 'below', 'left', 'right'
  position:'cursor',
});

8. Determine whether to allow the tooltip to be attached to the top-center, top-right, top-left, bottom-center, bottom-right, or bottom-left of the trigger element. Default: false.

tctooltip({
  // 'left', 'right'
  skew:'default',
});

9. Config the animations.

tctooltip({
  openDelay:0,
  closeDelay:0,
  effectSpeed:500,
  slide:true,
  slideAmount:'6px',
  fade:true,
  stayOpenOnHover: true,
});

Changelog:

12/05/2022

• Added stayOpenOnHover attribute

03/06/2022

• Fixed critical error when initiating multiple instances.

03/03/2022

• Fixed bug with window pane placement and reorganized folders.