yoyo-tooltip
v1.0.0
Published
Yoyo Tooltip is a customizable tooltip plugin that operates without any dependencies. It’s designed for ease of use and flexibility, allowing you to add stylish and functional tooltips to your website or application.
Downloads
77
Maintainers
Readme
Yoyo Tooltip
Introduction
This plugin provides a customizable tooltip without any dependencies.
Screenshot
Installation
Install Package
# npm
npm install yoyo-tooltip
# yarn
yarn add yoyo-tooltip
import { yoyoTooltip } from './node_modules/yoyo-tooltip/dist/yoyoTooltip.min.mjs';
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-toast@latest/dist/yoyoTooltip.umd.min.js"></script>
Self Hosted
<script src="path/to/yoyoTooltip.umd.min.js"></script>
Self Hosted (ES6 Module)
import { yoyoTooltip } from 'path/to/yoyoTooltip.mjs';
Usage
Simple Yoyo Tooltip
yoyoTooltip({
id: '#text',
content: '😂 Simple Tooltip on text',
});
Advance Yoyo Tooltip
yoyoTooltip({
id: '#text',
content: '😎 <strong>Advance Tooltip</strong> on text',
direction: 'top',
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 red 1px',
targetUnderlineOffset: '10px',
targetBackgroundColor: 'yellow',
targetFontWeight: 'bold',
});
Param
- id: target element id
- content: Main Text
- direction: Optional, {'top', 'right', 'left', 'bottom'} (Default Top)
- delay: Optional, (Default 0) (1000 = 1 sec)
- trigger: Optional, {'hover','click'} (Default Hover)
- backgroundColor: Optional (Default black)
- color: Optional (Default white)
- boxShadow: Optional
- targetHighlight: Optional, {true, false} (Default true)
- targetTextDecoration: Optional
- targetUnderlineOffset: Optional
- targetBackgroundColor: Optional
- targetFontWeight: Optional
License
This project is licensed under the MIT License - see the LICENSE file for details.