jaisocx_sites_tools

💡 shows or hides on a click on some another html node on the site.

📖️ Library @jaisocx/tooltip 🏷️ ver.: 1.2.5

🗓 Updated Winter 2026 Tue Jan 20 06:28:29 CET 2026

📐 Size

🗂 Folder: _ KB

📦 Tarball: _ KB

📋 .js: _ KB

⚡ JS Engine

🌐 Browser: ✅ yes

🧭 Express: ❌ no

🖥️ Console: ❌ no

The aim of the setup

💡 this is the site ui tool, this is shown or hidden on a click on some another html node on the site.

js example

.html example with webpack build bundle.js

<html>
  <head>
    <title>Tooltip Example</title>

    <script src="webpack_builds/ExampleTooltip/transpiled/webpack/bundle.js"></script>

  </head>
  <body>

    <h1>Tooltip Example</h1>

    <button id="tooltip-show-button">Button</button>

    <script>
      document.addEventListener('DOMContentLoaded', () => {

        const example = new ExampleTooltip();
        example.addTooltip (
          "tooltip-show-button",
          "theme-darkmode",
          "Hello World!"
        );

      });
    </script>
  </body>
</html>

.ts

import { Tooltip, Constants } from "@jaisocx/tooltip";

export class ExampleTooltip {

  addTooltip (
    eventTargetId: any,
    themeName: any,
    tooltipText: any // TODO
  ): void {

    const tooltip = new Tooltip();

    tooltip
      .setEventTargetHtmlNodeId ( eventTargetId )
      .setCssClasses ( themeName )
      .setHtml( tooltipText )
      .render ();
  }
}

.ts #2

Future improvals:

. shadow basic theme example . refining behaviour onscroll and on window resize, when a tooltip is drawn beyond the window border.

HELLO WORLD

GOOD LUCK AND HAVE FUN WITH CODING ))

Yours jaisocx.com Software Architect and Dev,

Elias