Skip to content

Latest commit

 

History

History
90 lines (74 loc) · 1.75 KB

README.md

File metadata and controls

90 lines (74 loc) · 1.75 KB
Raw

YK-Tool-Tipsy

YK-Tool-Tipsy is a lightweight tooltip library.

Installation

npm install yk-tool-tipsy

How to use

  • YK-Tool-Tipsy consists of 4 attributes:
<button
  tipsy="Hello Universe!"
  tipsy-position="above"
  tipsy-show-after="200"
  tipsy-hide-after="400"
>Click me</button>
Attribute Value
tipsy text content
tipsy-position above, below, left or right
tipsy-show-after milliseconds
tipsy-hide-after milliseconds
  • And in your JS file import the library and call init function to inilitialize your tooltips that has been defined in HTML.
import Tipsy from "yk-tool-tipsy"

Tipsy.init()
  • OR you can attach tooltip using:
// attach function creates and returns the created tooltip object ToolTipsy.
let tipsyObj = Tipsy.attach({
  target: document.getElementById("box"),
  content: "This is a BOX",
  position: "left",
  showAfter: 150,
  hideAfter: 0
})

Properties

tooltips

  • Key/Value pairs of all created
console.log(Tipsy.tooltips)

Methods

detach()

Tipsy.tooltips['tipsy-0'].detach()
  • OR you can use
Tipsy.detach(Tipsy.tooltips['tipsy-0'])

getLength()

  • Get length of created tooltips
Tipsy.getLength()

Change config of a tooltip

Tipsy.tooltips['tipsy-0'].position = TipsyPosition.below
Tipsy.tooltips['tipsy-0'].hideAfter = 800

References

  • Tooltip positions
import { TipsyPosition } from "yk-tool-tipsy"

TipsyPosition.above
TipsyPosition.below
TipsyPosition.left
TipsyPosition.right

License

Licensed under the ISC License.