nextcloud-libraries / nextcloud-libraries/nextcloud-vue
Ability to disable tooltip when an element is not ellipsized
Nobody has claimed this yet.
- Dominant language
- Vue
- Stars
- 246
- Forks
- 99
- Avg merge
- 1d 20h
- Merged PRs (30d)
- 103
Description
Some context here: https://github.com/nextcloud/spreed/pull/4548
In some cases, tooltips are there only to let the user see more information whenever an element was ellipsized. The latter is achieved with CSS using text-overflow: ellipsis and a few other CSS properties.
Whenever the element is fully visible, we don't want to display the tooltip as it often looks bad.
To achieve this, I propose that we extend the "v-tooltip" directive and add an option "ellipsisElement" that receives a reference to another element to check whether it's ellipsized or not. Why another element ? Because sometimes we want the tooltip to be shown for a bigger element like the container, even though it's one of the sub-elements that is ellipsized.
The ellipsis check can be done with isEllipsized = (e.offsetWidth < e.scrollWidth) where e is the HTML element to check.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by locating the v-tooltip directive and review the referenced spreed pull request 4548 for context. Check how the directive accepts options and how its target element is accessed. Done means the tooltip can inspect a referenced element, stays hidden when offsetWidth is not less than scrollWidth, and remains available when the text is ellipsized.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 42/100