A lightweight JavaScript library for implementing tooltips.

Last update: Nov 2, 2022

Overview

Tooltipper

A lightweight (1kB) JavaScript library for implementing tooltips.

Installation

Install via NPM:

npm i -S tooltipper

Install via CDN:

<script type="module" src="https://unpkg.com/tooltipper@1/tooltipper.min.mjs"></script>
<script defer src="https://unpkg.com/tooltipper@1/tooltipper.min.js"></script>

Usage

Create tooltips using the tooltip attribute:

<a href="#" tooltip="Edit file">
    <svg />
</a>

Create tooltips by adding the tooltip attribute to an element with an aria-label attribute:

<a href="#" aria-label="Edit file" tooltip>
    <svg />
</a>

Please note that tooltipper is an unopinionated library. All we aim to do is create, track, and remove custom <tool-tip> elements within the DOM. You are responsible for providing the CSS.

Example SCSS

Click here to view the example.

tool-tip {
    background-color: #424242;
    color: #fff;
    border-radius: 0.125rem;
    line-height: 24px;
    height: 24px;
    white-space: nowrap;
    padding: 0 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    pointer-events: none;
    transform-origin: center;

    /* The visible class is applied once the tool-tip element as been appended to the body & positioned correctly */
    &.visible {
        animation: limitedTooltip 1725ms 150ms linear forwards;
    }
}
@keyframes limitedTooltip {
    0% {
        opacity: 1;
    }
    4% {
        opacity: 1;
    }
    96% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        animation-timing-function: ease-in-out;
    }
}

Comments

Bump shell-quote from 1.7.2 to 1.7.3
Bumps shell-quote from 1.7.2 to 1.7.3.

Changelog

Sourced from shell-quote's changelog.

1.7.3

Fix a security issue where the regex for windows drive letters allowed some shell meta-characters to escape the quoting rules. (CVE-2021-42740)

Commits

6a8a899 1.7.3

5799416 fix for security issue with windows drive letter regex

c7de931 Add security.md

414853f Update readme.markdown (#43)

0fc4a97 use Github Actions (#42)

See full diff in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR

@dependabot recreate will recreate this PR, overwriting any edits that have been made to it

@dependabot merge will merge this PR after your CI passes on it

@dependabot squash and merge will squash and merge this PR after your CI passes on it

@dependabot cancel merge will cancel a previously requested merge and block automerging

@dependabot reopen will reopen this PR if it is closed

@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually

@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

@dependabot use these labels will set the current labels as the default for future PRs for this repo and language

@dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language

@dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language

@dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.

dependencies
opened by dependabot[bot] 1
Live tooltip text rendering

When the tooltip text changes (like when a toggle button is clicked) the tooltip text needs to updated without having to unhover/focus the element.

Example

Initial: "Enable setting" user clicks button Updated: "Disable setting"
enhancement

opened by codewithkyle 1
Bump ansi-regex from 3.0.0 to 3.0.1
Bumps ansi-regex from 3.0.0 to 3.0.1.

Commits

f545bdb 3.0.1

c57d4c2 fix a few old XO issues for backport

419250f Fix potential ReDoS (#37)

See full diff in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR

@dependabot recreate will recreate this PR, overwriting any edits that have been made to it

@dependabot merge will merge this PR after your CI passes on it

@dependabot squash and merge will squash and merge this PR after your CI passes on it

@dependabot cancel merge will cancel a previously requested merge and block automerging

@dependabot reopen will reopen this PR if it is closed

@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually

@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

@dependabot use these labels will set the current labels as the default for future PRs for this repo and language

@dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language

@dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language

@dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.

dependencies
opened by dependabot[bot] 0
Bump minimist from 1.2.5 to 1.2.6
Bumps minimist from 1.2.5 to 1.2.6.

Commits

7efb22a 1.2.6

ef88b93 security notice for additional prototype pollution issue

c2b9819 isConstructorOrProto adapted from PR

bc8ecee test from prototype pollution PR

See full diff in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR

@dependabot recreate will recreate this PR, overwriting any edits that have been made to it

@dependabot merge will merge this PR after your CI passes on it

@dependabot squash and merge will squash and merge this PR after your CI passes on it

@dependabot cancel merge will cancel a previously requested merge and block automerging

@dependabot reopen will reopen this PR if it is closed

@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually

@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

@dependabot use these labels will set the current labels as the default for future PRs for this repo and language

@dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language

@dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language

@dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.

dependencies
opened by dependabot[bot] 0
Check for definition of TouchEvent

This small fix adds a check for the TouchEvent struct. Without this check the tooltip will cause an error on Firefox as it does not provide a TouchEvent.

opened by Liberatys 0
Performance

There is a performance cost to appending/removing elements from the DOM. We should render a new tooltip element when it does not exist and we should move/hide the element when it is no longer needed.

We should also use transform instead of the left and right CSS properties.
enhancement

opened by codewithkyle 0
Passive event listeners

Stop forcing developers to fire refresh() instead capture all document.documentElement events and only apply the effect to e.target elements that contain the tooltipper attribute.
enhancement

opened by KyleAndrewsGPC 0

Owner

Kyle Andrews

UX Designer & Developer

GitHub https://codewithkyle.github.io/tooltipper/

Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

4 May 3, 2022

Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

14 Jan 3, 2023

jQuery plugin to add 360 rotatable bubble style tooltips

Sorry, this project is no longer maintained. grumble.js Add a bubble to any element; configure its rotation on a 360 degree axis and define its distan

777 Nov 9, 2022

CSS Tooltips built on Tether. #hubspot-open-source

Tooltip Tooltip.js is a Javascript and CSS library for creating styleable tooltips. Install Dependencies Tether Drop Installing via npm and bower will

714 Jan 2, 2023

Extends Bootstrap Tooltips and Popovers by adding custom classes. Available for Bootstrap 3 and Bootstrap 4.

Bootstrap Tooltip Custom Class Extends Bootstrap Tooltips and Popovers by adding custom classes. Available for Bootstrap 3 and Bootstrap 4. Define you

14 Feb 10, 2022

A Drag-and-Drop library for all JavaScript frameworks implementing an enhanced transformation mechanism to manipulate DOM elements

JavaScript Project to Manipulate DOM Elements DFlex A Drag-and-Drop library for all JavaScript frameworks implementing an enhanced transformation mech

1.5k Jan 8, 2023

The Javascript library of choice for implementing commenting in your web app

jquery-comments jquery-comments is a jQuery plugin for implementing an out-of-the-box commenting solution to any web application with an existing back

288 Dec 27, 2022

This web application was build the microverse program, it's about implementing functionalities using JavaScript

11 Aug 18, 2022

Canvas-based JavaScript UI element implementing touch, keyboard, mouse and scroll wheel support.

pure-knob Initially a (circular) knob / dial control with mouse, wheel, touch and keyboard support, implemented in pure JavaScript. In addition, this

44 Nov 4, 2022

Example project implementing authentication, authorization, and routing with Next.js and Supabase

Magic Link Authentication and Route Controls with Supabase and Next.js To run this project, To get started with this project, first create a new proje

134 Dec 11, 2022

Implementing hexagonal architecture on AWS Lambda with Node.js

Developing evolutionary architecture with AWS Lambda Context Agility enables you to evolve a workload quickly, adding new features, or introducing new

95 Dec 20, 2022

Venni backend - The backend of the Venni client apps implementing the credit card payments, matching algorithms, bank transfers, trip rating system, and more.

Cloud Functions Description This repository contains the cloud functions used in the Firebase backend of the Venni apps. Local Development Setup For t

1 Jan 3, 2022

It consists of a recreation of Twitter, to put into practice both Front-end and Back-end knowledge by implementing the MERN Stack together with other technologies to add more value to the project.

Twitter-Clone_Back-end ✨ Demo. ?? About the project. ?? Descriptions. It consists of a recreation of Twitter, to put into practice knowledge of both F

5 Apr 12, 2022

startupDB is an Express middleware function implementing a high-performance in-memory database

startupDB startupDB is a database designed to create REST APIs. It is implemented as an Express middleware function and allows for easy implementation

8 Jul 26, 2022

A WASI implementation that uses VS Code's extension host as the implementing API

Project This repo has been populated by an initial template to help get you started. Please make sure to update the content to build a great experienc

93 Dec 24, 2022

It consists of a recreation of Twitter, to put into practice knowledge of both Front-end and Back-end implementing the MERN Stack along with other technologies to add more value to the project.

Twitter-Clone_Front-end ✨ Demo. Login Home Profile Message Notifications Deployed in: https://twitter-clone-front-end.vercel.app/ ?? About the project

5 Jun 26, 2022

A lightweight JavaScript library for implementing tooltips.

Related tags

Overview

Tooltipper

Installation

Usage

Example SCSS

Comments

Bump shell-quote from 1.7.2 to 1.7.3

1.7.3

Live tooltip text rendering

Example

Bump ansi-regex from 3.0.0 to 3.0.1

Bump minimist from 1.2.5 to 1.2.6

Check for definition of TouchEvent

Performance

Passive event listeners