question/feature_request(enhancement): tooltip on click

[Kristinita]

1. Summary

I couldn’t find how I can do tooltip on click if I use balloon.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 click action has been taken. The end-user should know that the operation was successful, and not remain in the dark whether the operation was completed or not. I couldn’t find, how I can do it use balloon.css.

3. Desired behavior

Currently, I use Tooltipster on my site. Example, how it works:

One tooltip by hover, another tooltip by left mouse button click. How we can get the similar behavior for balloon.css?

4. Not helped

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

1. Balloon.css description
2. Google
3. Issues/pull requests of this repository

Thanks.

[kazzkiq]

Tooltips are better suited for hints (hence the "hover" behavior). What you're looking for is more like a status update. Something like toasters/snackbars, perhaps.

That being said, you can always use some JavaScript to show/hide Balloon.css tooltips:

<button onclick="doSomething(this)">Do Something!</button>

<script>
  function doSomething(el) {
    // do your stuff, and then show a tooltip:
    el.setAttribute("aria-label", "Action was successful!");
    el.setAttribute("data-balloon-pos", "up");
    el.setAttribute("data-balloon-visible");

    // hide message after 2s
    setTimeout(() => {
      el.removeAttribute("aria-label");
      el.removeAttribute("data-balloon-pos");
      el.removeAttribute("data-balloon-visible");
    }, 2000);
  }
</script>

Live Example

[Kristinita]

Status: CONFIRMED :heavy_check_mark:

1. MCVE

• Code on the Codepen

• Demonstration:

  

2. Notes

2.1. Blur

.blur() method or another solutions are required that remove focus around button on click.

2.2. Clipboard.js

For real Clipboard.js usage, we shouldn’t show the tooltip on the click. If we click to the button, this doesn’t mean that the text has been successfully copied; some mistakes might have happened.

We need to use Clipboard.js events. In my real file I showed with detailed comments how we can combine Clipboard.js and Balloon.css.

Thanks.