Tooltip using only CSS and very low build size.

Rajiv

Last update: Dec 11, 2022

Overview

css-only-tooltip

A very lightweight tooltip utitlity library, made using only CSS with dynamic light and dark themes.

Insatallation

Using npm
$ npm install css-only-tooltip
Using yarn
$ yarn add css-only-tooltip

Using jsDelivr CDN

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/css-only-tooltip@latest/dist/styles.min.css">

Using unpkg CDN:

 <link rel="stylesheet" href="https://unpkg.com/css-only-tooltip@latest/dist/styles.min.css">

Quick start

css-only-tooltip uses only data html attribute for working. So, the only step is to import the CSS in your file and use it.

When using CDN:-

Add the CDN link in your HTML file inside the <head> tag. And then pass the tooltip text in format:

<!DOCTYPE  html>
 <head>
   <!-- Add the CDN link -->
   <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/styles.min.css">
</head>

<body>
   <div class="container">
     <p data-css-only-tooltip="Tooltip 1">Text</p>
   </div>
</body>
</html>

When using Package Manger (NPM/Yarn):-

Import the styleSheet into the main root level component of the App. (for eg. in App.js in React App)

import 'css-only-tooltip/dist/styles.min.css';

Now, add the text in the data attribute in the child components.

<span data-css-only-tooltip="Hello from tooltip">Hover on me to see the tooltip</span>

Customization

There are customization options provided.
Provide the customization options in a space seperated string in the data attribute like this:-

<p data-css-only-props="customization options">

Options:

Thre are some optional customization options are available.

Positions:

There are four positions provided. Bottom is default option.
- top
- right
- bottom
- left
Themes:

This supports the user device's theme dynamically. There's no need to specify theme spereately. Beside this, there are two theme options provided for customization. light is default option.
- dark
- light

Option	Values	default	Required
Position	`top`, `right`, `bottom`, `left`	`bottom`	No
Theme	`light`, `dark`	`light`	No

Examples:

dark theme, right side.

<span 
  data-css-only-tooltip="Tooltip 2 bottom" 
  data-css-only-tooltip-props="light bottom">
   Dakr tooltip on right side
</span>

Play with it live:-

A simple step by step tooltip helper for any site

Tooltip Sequence A minimalistic set of tooltips on your app. What it does So suppose you create a Web Application and you want to take your users or a

Dec 21, 2022

The JavaScript library let’s you transform native tooltip’s into customizable overlays.

iTooltip The JavaScript library let’s you transform native tooltip’s into customizable overlays. Use: script src="/path/to/iTooltip.js"/script sc

Dec 17, 2021

Modern approach to Low Quality Image Placeholders (LQIP) using webp and sharp.

lqip-modern Modern approach to Low Quality Image Placeholders (LQIP) using webp and sharp. (demo) This approach is extremely fast and produces much sm

Dec 30, 2022

In this project I have build a To Do List app that you can list, add, delete and manage your daily tasks better. Build with HTML, CSS, JS, ES6, JSON

ToDo List This project is build by javascript web packages which can add and remove daily tasks. Built With Html Css Javascript Sublime Text Author 👤

Oct 25, 2022

advanced calculator using only HTML, CSS and JS

Welcome to GitHub Pages You can use the editor on GitHub to maintain and preview the content for your website in Markdown files. Whenever you commit t

May 14, 2022

jQuery based scrolling Bar, for PC and Smartphones (touch events). It is modern slim, easy to integrate, easy to use. Tested on Firefox/Chrome/Maxthon/iPhone/Android. Very light 7ko min.js and 1Ko min.css.

Nice-Scrollbar Responsive jQuery based scrolling Bar, for PC and Smartphones (touch events). It is modern slim, easy to integrate, easy to use. Tested

Jan 18, 2022

Smart Auto Move learns the size and position of your application windows and restores them to the correct place on subsequent launches. Supports GNOME Wayland.

smart-auto-move smart-auto-move is a Gnome Shell extension which keeps track of all application windows and restores them to the previous position, si

Dec 23, 2022

Group and sort Eleventy’s verbose output by directory (and show file size with benchmarks)

eleventy-plugin-directory-output Group and sort Eleventy’s verbose output by directory (and show file size with benchmarks). Sample output from eleven

Oct 27, 2022

A low-feature, dependency-free and performant test runner inspired by Rust and Deno

minitest A low-feature, dependency-free and performant test runner inspired by Rust and Deno Simplicity: Use the mt test runner with the test function

Nov 12, 2022

Comments

light theme not working on users having dark theme enabled
light theme is not working when the theme value is passed through data-css-only-props="light".

<span data-css-only-tooltip="test message" data-css-only-tooltip-props="light top" >Test</span >

with this code, a tooltip with the light theme is expected on all devices but getting dark theme tooltip on dark users who has enabled dark theme on devices.
opened by thoughtlessmind 0

Releases(v1.1.2)

v1.1.2(Jan 31, 2021)
Bug fix

#1 fix

Improvements

Added codedsandbox demo link in the readme

Added gif of demo tooltip in the readme

Source code(tar.gz)
Source code(zip)
v1.1.1(Jan 27, 2021)

Source code(tar.gz)
Source code(zip)
v1.1.0(Jan 27, 2021)
User's device theme will be applied dynamically if not specified in props.

readme update and correction

Source code(tar.gz)
Source code(zip)
v1.0.2(Jan 27, 2021)

correction in readme and installation guide.
Source code(tar.gz)
Source code(zip)
v1.0.0(Jan 26, 2021)
Customization

theme

postion

Source code(tar.gz)
Source code(zip)