Yoyo Tooltip

Dependency Free Customizable Light Weight Elegant Easy to Use
Example

Advance Tooltip on Text

Top Tooltip

yoyoTooltip({

id: '#top',

direction: 'top',

content: '😍 Hello Worlds',

});

Installation
- Install via npm
Install Package

npm install yoyo-tooltip

- Install via yarn
Install Package

yarn add yoyo-tooltip

- Import (npm / yarn)
Import ES6 Module

import { yoyoTooltip } from './node_modules/yoyo-tooltip/dist/yoyoTooltip.min.mjs';

Include

<script src="./node_modules/yoyo-tooltip/dist/yoyoTooltip.umd.min.js"></script>

- Include via CDN
CDN

<!-- jsDelivr CDN -->

<script src="https://cdn.jsdelivr.net/gh/smallvi/yoyoTooltip@latest/dist/yoyoTooltip.umd.min.js"></script>


<!-- unpkg CDN -->

<script src="https://unpkg.com/yoyo-tooltip@latest/dist/yoyoTooltip.umd.min.js"></script>

- Self Hosted
Import ES6 Module

import { yoyoTooltip } from 'path/to/yoyoTooltip.min.mjs';

Include

<script src="path/to/yoyoTooltip.umd.min.js"></script>

Usage
Call the `yoyoTooltip` function after the page has loaded.
Simple Yoyo Tooltip

yoyoTooltip({

id: '#top',

direction: 'top',

content: '😍 Hello Worlds',

});

Advance Yoyo Tooltip

yoyoTooltip({

id: '#text',

direction: 'top',

content: '😎 <strong>Advance Tooltip</strong>> on text',

delay: 0,

trigger: 'hover',

backgroundColor: '#ff0000',

color: '#ffffff',

boxShadow: 'rgba(240, 46, 170, 0.4) 5px 5px, rgba(240, 46, 170, 0.3) 10px 10px, rgba(240, 46, 170, 0.2) 15px 15px, rgba(240, 46, 170, 0.1) 20px 20px, rgba(240, 46, 170, 0.05) 25px 25px',

targetHighlight: true,

targetTextDecoration: 'underline wavy black 2px',

targetUnderlineOffset: '10px',

targetBackgroundColor: 'yellow',

targetFontWeight: 'bold',

});

Params
Description

id

The ID of the target element.

content

The text content to be displayed.

direction

Optional

Specifies the direction in which the content should appear relative to the target element.

('top', 'right', 'left', or 'bottom'). The default is 'top'

delay

Optional

Specifies the delay before the content appears, in milliseconds.

For example, 1000 equals 1 second. The default is 0 (no delay).

trigger

Optional

Specifies the event that triggers the content to appear

('hover', 'click'). The default is 'hover'

backgroundColor

Optional

Specifies the background color of the content.

The default color is black.

color

Optional

Specifies the text color of the content.

The default color is white.

boxShadow

Optional

Specifies the box shadow of the content. This can be used to add depth or a shadow effect.

targetHighlight

Optional

Indicates whether the target element should be highlighted when the content appears.

(true, false). The default color is white.

targetTextDecoration

Optional

Specifies the text decoration (such as underline, overline, etc.) of the target element when the content appears.

targetUnderlineOffset

Optional

Specifies the distance of the underline from the text when text decoration is applied.

(true, false)

targetBackgroundColor

Optional

Specifies the background color of the target element when the content appears.

targetFontWeight

Optional

Specifies the font weight of the target element when the content appears.