Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

codex-tooltip

Package Overview
Dependencies
Maintainers
1
Versions
6
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

codex-tooltip

Simple tooltips module

  • 1.0.5
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
1
Created
Source

codex.tooltips

Lightweight JavaScript module for adding tooltips with custom content to any HTML element

Installation

First, install it via package manager:

yarn add codex-tooltip
npm install codex-tooltip

Then, include tooltips to your script, create an instance and call hiding/showig methods:

import Tooltip from 'codex.tooltip';

const tooltip = new Tooltip();

tooltip.show(targetElement, 'Tooltip text');

Usage

There are two main methods: show() and hide()

Show

Method shows tooltip with custom content on passed element

tooltip.show(element, content, options);
parametertypedescription
elementHTMLElementTooltip will be showed near this element
contentString or NodeContent that will be appended to the Tooltip
optionsObjectSome displaying options, see below

Available showing options

nametypeaction
placementtop, bottom, left, rightWhere to place the tooltip. Default value is `bottom'
marginTopNumberOffset above the tooltip with top placement
marginBottomNumberOffset below the tooltip with bottom placement
marginLeftNumberOffset at left from the tooltip with left placement
marginRightNumberOffset at right from the tooltip with right placement
delayNumberDelay before showing, in ms. Default is 70
hidingDelayNumberDelay before hiding, in ms. Default is 0

Hide

Method hides the Tooltip.

tooltip.hide();

Example

import Tooltip from 'codex.tooltip';

const tooltip = new Tooltip();
const someButton = document.getElementById('some-button');

someButton.addEventListener('mouseenter', () => {
  tooltip.show(someButton, 'Button helper');
});

someButton.addEventListener('mouseleave', () => {
  tooltip.hide();
});

In example above we show tooltip near some button by "mouseenter" and hide by "mouseleave". For this events you can also use the onHover() decorator:

import Tooltip from 'codex.tooltip';

const tooltip = new Tooltip();
const someButton = document.getElementById('some-button');

tooltip.onHover(someButton, 'Button helper', {
  placement: 'right',
  delay: 150
})

About CodeX

CodeX is a team of digital specialists around the world interested in building high-quality open source products on a global market. We are open for young people who want to constantly improve their skills and grow professionally with experiments in cutting-edge technologies.

🌐Join 👋TwitterInstagram
codex.socodex.so/join@codex_team@codex_team

FAQs

Package last updated on 15 Mar 2022

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc