Tipnix.js - Lightweight & Customizable Tooltip Library

Tipnix Tooltip is a lightweight, fast, and fully customizable tooltip library designed to enhance user experience with clean and responsive tooltips. Currently showing examples for cdn installation.

Special Feature: tipnix-attributes

Tipnix Tooltip is a lightweight plugin that offers a unique feature for quickly styling tooltips using simple tipnix-* attributes—no extra CSS or complex setup needed.This provides a more intuitive and semantic way to style your tooltips directly in HTML.

Developer Highlight

After initialization, tipnix-* attributes allow quick, dynamic styling without altering the core plugin logic. Attributes, making your HTML more readable and maintainable.

Hover for Custom Tooltip
Hover over the button to see the custom tooltip styled with tipnix-attributes

Available tipnix-attributes

  • tipnix-bg

    Sets the background color

  • tipnix-text-color

    Sets the text color

  • tipnix-font-size

    Sets the font size

  • tipnix-text

    Sets the tooltip content

  • tipnix-width

    Sets the tooltip width

  • tipnix-padding

    Sets the tooltip padding

  • tipnix-parent

    Sets the parent element selector for positioning

  • tipnix-animation

    Sets the animation style

Complete Example

<div 
  class="tipnix" 
  tipnix-bg="#ff0000"
  tipnix-text-color="#ffffff"
  tipnix-font-size="40px"
  tipnix-text="This is a fully customized tooltip using tipnix-attributes"
  tipnix-width="500px"
  tipnix-padding="20px"
  tipnix-parent=".body"
  tipnix-animation="wobble"
>
  Hover for a fully customized tooltip
</div>

Getting Started

Tipnix Tooltip is a lightweight and customizable tooltip plugin designed for seamless integration into any project. Follow these simple steps to add interactive tooltips to your website.

Installation

Add the following CDN links to your HTML file to include Tipnix Tooltip's JavaScript and CSS

CSS CDN
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Dimuthu-Pinsara/tipnix-tooltip-js@latest/tipnix-tooltip.css">
JS CDN
<script src="https://cdn.jsdelivr.net/gh/Dimuthu-Pinsara/tipnix-tooltip-js@latest/tipnix-tooltip.js"></script>

Create Element

Basic Usage

To create a tooltip, use the following structure

<div class="tipnix" tipnix-text="Tipnix Tooltip Js">
      <span class="text">i</span>
  </div>

Customization

Tipnix Tooltip supports various options for customization, including different themes, positioning, and animations. Modify the CSS or extend its functionality through JavaScript to match your design needs.

Background Color

Specifies the background color of the tooltip. You can set it using a valid HEX color code.

Tooltip
initTipNixTooltip({
    backgroundColor: '#000000',
  });

Font Color

Sets the font color of the tooltip text. You can use any valid rgb hex color code. Ex: #FF0000

Tooltip
initTipNixTooltip({
    textColor: '#FF0000',
  });

Font Size

Sets the font size of the tooltip text. You can use any valid CSS unit, such as px, em, or rem.

Tooltip
initTipNixTooltip({
    fontSize: '16px',
  });

Animations

Defines the animation style for the tooltip. Possible values can include 'bounce', 'fade', 'slide', or any other animation supported by CSS.

initTipNixTooltip({
    animation: 'bounce',
  });
shake
bounce
fadeSlideUp
zoom
pulse
flipIn
slideInLeft
swing
fadeInScale
tiltFadeIn

Width

Specifies the width of the tooltip. You can use any valid CSS unit (e.g., px, %, em).

Tooltip
initTipNixTooltip({
    width: '225px',
  });

Padding

Defines the inner padding of the tooltip. You can set padding for all sides or specify individual values for top, right, bottom, and left.

Tooltip
initTipNixTooltip({
    padding: '10px',
  });

Parent Wrap Element

Specifies the selector of the parent element where the tooltip should be positioned. This helps in positioning the tooltip relative to a specific element on the page.

without parent element
with parent element
initTipNixTooltip({
    parentWrapElement: '.parent-ele'
  });

Directions

The Tipnix Tooltip plugin seamlessly supports both RTL (Right-to-Left) and LTR (Left-to-Right) directions. You don't need to worry about adjusting the text direction manually—Tipnix automatically adapts based on your page's layout. This ensures a hassle-free experience, saving you time and effort while maintaining perfect readability in any language setting.

Tooltip

Upcoming Events

New Animations

Get ready for a more dynamic experience! Our next update will introduce brand-new animations to make interactions smoother and more engaging. Stay tuned for a fresh, seamless, and visually enhanced experience!

New Positioning Options

In the Next update of the Tipnix Tooltip plugin, you now have enhanced flexibility with the tooltip's positioning. You can position the tooltip relative to the target element in any of the following directions: top, left, right, and bottom. This feature provides you with more control over the tooltip placement, ensuring that it fits perfectly into your layout and design requirements. Simply specify the desired position in the initialization options and watch your tooltip align exactly where you want it.

Note: When using the CDN version, the TooltipJS object is automatically added to the global window scope.