show tooltip only when the text is trimmed

[antoniogiroz]

Hi!

How to show the tooltip only when the text is trimmed (is too long) and I do mouse hover on it?

Thanks!!

[tm2josep]

Use this to measure text width: https://www.html5canvastutorials.com/tutorials/html5-canvas-text-metrics/. I assume you know what the width of your element is.
You can then compare the two, and then pass that computed prop into the v-tooltip directive.

[ivansieder]

Hi @algil, as far as I know there is no possibility to do this directly without any core-modifications. Could be a feature request @Akryum?

Other than that, I could just think about rendering the component 2 times, one time with and one time without the v-tooltip directive.

[Octoshape]

Sorry to dig this up here, but I'm running into a similar problem.

You can then compare the two, and then pass that computed prop into the v-tooltip directive.

@tm2josep what do you mean by that? Passing an empty string as the content option still shows a tooltip, albeit very small only.

It is a bit mind-boggling that there is no simple "enabled" or "disable" option for the v-tooltip.

Edit: I stand corrected, passing an empty string as the content option for v-tooltip does indeed hide it completely. Thanks @tm2josep and sorry for the confusion!

[Akryum]

Any falsy value for the content will hide the tooltip 😉

[ZalgirisKaunas]

Any falsy value for the content will hide the tooltip 😉

Perfect!

[PVince81]

Not sure what version this worked in but with v2.0.3 returning the boolean false from an async handler, an empty string or null does render an empty tooltip instead of cancelling it. Regression ?

To test:

1. git clone the tag v2.0.3
2. yarn install
3. yarn demo:server
4. Edit https://github.com/Akryum/v-tooltip/blob/v2.0.3/docs-src/PageHome.vue#L650 and replace the returned value with false
5. Open the demo page and scroll to the "Async content" section.
6. Hover on top of the "Hover me"

It will display "false" in a tooltip.

However if you remove the function and set "content: false" directly, it will properly hide it.

I tried other variants with async() for the function, also returning a Promise.
All caused the tooltip to show "false".

Anyone had more luck ?

The reason I want the async function to do the measurement (ellipsis check) is because I have a list with many items, so don't want to compute it right away for all of them, but only when hovering

[PVince81]

I've done some research in the code and it appears that the tooltip lib itself is not able to hide the tooltip even when setting empty values. It's the directive code that destroys the tooltip when it detects empty values: https://github.com/Akryum/v-tooltip/blob/v2.0.3/src/directives/v-tooltip.js#L192

Maybe the code that calls the async function would need to be moved to the directive. Sounds like a bigger change.

[nassissme]

I'm also interested in a feature to display only the tooltip if the text is too large (based on a css ellipsis attribute for example). A good idea ?