Animated Tooltip Component Using HTML, Vanilla JavaScript

Customizable Tooltip Component is a JavaScript web component, which is fully customizable within HTML and can be used within any framework. Using Vanilla JavaScript, HTML, and regular CSS only!

How to make use of it:

1. Add the primary script to the web page.

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

2. Add the tooltip element to the web 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 element.

<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>

Animated Tooltip Component, Customisable Tooltip Component Plugin/Github

Animated-Tooltip-Demo


See Demo And Download

Official Website(MarcIsCoding): Click Here

This superior jQuery/javascript plugin is developed by MarcIsCoding. For extra Advanced Usage, please go to the official website.

Share