Animated Tooltip Component In Vanilla JavaScript

Category: Javascript , Tooltip | January 26, 2021
Author:MarcIsCoding
Views Total:122 views
Official Page:Go to website
Last Update:January 26, 2021
License:MIT

Preview:

Animated Tooltip Component In Vanilla JavaScript

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>

You Might Be Interested In:


Leave a Reply