Animated Tooltip Component In Vanilla JavaScript

Preview:

Description:

A Custom Element that attaches an animated customizable tooltip to elements using plain JavaScript.

How to use it:

1. Add the main script to the page.

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

2. Add the tooltip component to the page.

<mg-tooltip>
  <span slot="alert">
    Hover Me
  </span>
  <span slot="message">
    Custom Tooltip Content Here
  </span>
</mg-tooltip>

3. Available props to customize the tooltip component.

• alert_decoration: Text decoration
• alert_hl_color: Background color
• alert_txt_color: Text color
• alert_weight: Font weight
• alert_opacity: Opacity
• message_bg: Background color of tooltip content
• message_txt_color: Text color of tooltip content
• message_weight: Font weight of tooltip content
• tooltip_shadow: Tooltip shadow
• click_toggle: Click toggle

<mg-tooltip 
  alert_decoration='' 
  alert_hl_color='' 
  alert_txt_color='' 
  alert_weight='' 
  alert_opacity='' 
  message_bg='' 
  message_txt_color='' 
  message_weight='' 
  tooltip_shadow='' 
  click_toggle=''>
  <span slot="alert">
    Hover Me
  </span>
  <span slot="message">
    Custom Tooltip Content Here
  </span>
</mg-tooltip>