chinchang / chinchang/hint.css

question/feature_request(enhancement): tooltip on click

Open
#182 1 comment 0 reactions 0 assignees View on GitHub
Dominant language
CSS
Stars
8.4k
Forks
680
PR merge metrics
No merged PRs in 30d

Description

### 1. Summary

I couldn’t find how I can do tooltip on the click event to an element without jQuery if I use hint.css.

### 2. Argumentation

#### 2.1. Common cause

Accessibility.

#### 2.2. Details

If the end-user of my site click to some button, it would be nice to tell him that the action has been taken. It’s not good if the end-user doubts whether he did everything right. Also, it’s desirable that the dialog isn’t obtrusive and distracting.

### 3. Desired behavior

Currently, I use [**Tooltipster**](https://github.com/calebjacob/tooltipster) jQuery tooltips library on my site for these purposes. [**Example**](https://kristinita.netlify.app/programs/kristinitaluckylink#Shortcuts), how it works:

![Tooltipster](https://i.imgur.com/7ZjROp2.png)

One tooltip by hover, another tooltip by left mouse button click.

Unfortunately, Tooltipster have a big jQuery dependency and doesn’t work with [**Zepto**](https://zeptojs.com/) and [**cash**](https://github.com/fabiospampinato/cash) — lightweight jQuery alternatives.

Can we get the similar behavior for hint.css?

### 4. Not helped

I couldn’t find how I can get the desired behavior in:

1. [**Hint.css description and examples**](https://kushagra.dev/lab/hint/)
1. Google ([**this**](https://stackoverflow.com/a/15936102/5951529) example doesn’t work for me)
1. Issues/pull requests of this repository (and [**this**](https://github.com/chinchang/hint.css/issues/77) example also)

Thanks.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.