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!

Must Read: Simplest Popup Message Tooltip Plugin | jQuery pwTooltip

How to make use of it:

1. Add the 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>

See Also –

How to Create Guided Tours and Highlight Elements | Tooltip Sequence
[Dropup] Pure CSS Dropdown Menu Used For Tooltip | Drop.css
Beautiful Tooltip Popup For jQuery Plugin | smallipop

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.