nextcloud-libraries / nextcloud-libraries/nextcloud-vue

Ability to disable tooltip when an element is not ellipsized

Open
#1,567 4 comments 0 reactions 0 assignees View on GitHub

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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.