Ultimate Tooltip

Lightweight tooltip library with ultimate flexibility and style. See basic preview on codepen

CDN

Include this in your project.

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/gh/hicodersofficial/tooltip@main/lib/tooltip.css"
/>
<script src="https://cdn.jsdelivr.net/gh/hicodersofficial/tooltip@main/lib/tooltip.js"></script>

Minified

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/gh/hicodersofficial/tooltip@main/lib/tooltip.min.css"
/>
<script src="https://cdn.jsdelivr.net/gh/hicodersofficial/tooltip@main/lib/tooltip.min.js"></script>

Data Property

Use these data property to modify tooltip.

Property	value	Description
data-ttp-off	true | ""	Turn off tooltip
data-ttp-opacity	0-1	Set tooltip opacity
data-ttp-class	CSS class	Add your own css class
data-ttp-triangle-off	true | ""	Remove tip triangle
data-ttp-margin	Number	Set tooltip margin
data-ttp-placement	Placements	Set tooltip placement

Placement:

top
left
bottom
right
top-left
top-right
bottom-left
bottom-right
left-top
left-bottom
right-top
right-bottom

CSS Variable

--ttp-delay: 0.1s;
--ttp-transition-timing: 0.5s;
--ttp-background: #181818;
--ttp-color: #fff;
--ttp-padding: 10px;
--ttp-font-size: 14px;
--ttp-border-radius: 4px;
--ttp-max-width: 250px;
--ttp-border: 1px solid #333;

Use above CSS variables to give global or custom class base styling.

Note: ttp-class should not use the padding property; instead, use the --ttp-padding CSS variable to give padding.

Preview