mi6 / mi6/ic-ui-kit

[ic-tooltip]: add prop to disable tooltip from appearing

Open
#2,844 2 comments 0 reactions 0 assignees View on GitHub
component: ic-tooltip
Dominant language
TypeScript
Stars
53
Forks
63
Avg merge
2d 4h
Merged PRs (30d)
15

Description

## Summary
Add a prop which will allow the consumer to disable all tooltip functionality.

## 💬 Description
At the moment, it is not possible to disable all functionality of the tooltip. Where this feature would be useful is if the tooltip is used to display truncated text. If the text is shown in full and no longer truncated, the consumer must strip the text from the body of the tooltip component, remove/delete the tooltip element and re-apply the content as a child to the wrapper.

It would be easier to provide a prop which will prevent the tooltip from appearing as well as prevent it from being read out by screen readers.

## 💰 User value
This would improve the implementation for enabling and disabling the tooltip.

## 📚 User Stories
If relevant, describe the high-level functionality as user stories.

*As a developer:
*I need be able to disable the tooltip functionality*
*So that I do not need to strip out the contents and delete the tooltip when it is no longer required*

## 📝 Acceptance Criteria
If relevant, describe in full detail the different interactions and edge cases that the component or patterns needs to fulfil.

*Given that I have applied a tooltip to an element which doesn't need to be displayed*
*When I set the disabled(?) prop to true*
*Then the tooltip should not appear on hover or click*

## ✏ Designs
If there's a Figma design file (or other mock-up), include it here.

## 🧾 Guidance
If there's written guidance or documentation, include a link to it here.

## Additional info
There is already a `disableClick` prop which is internal. A suggestion is to add a `disable` prop which sets `disableHover` and `disableClick` to true.

Contributor guide

Open the contributing guide

Research direction

Locate the ic-tooltip component entry point and inspect how the existing disableClick and disableHover behavior is implemented. Define the disabled state against the stated hover, click, and screen-reader requirements, then add or update the component’s tests to verify that disabled tooltips do not appear or expose their content.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
accessibility, frontend
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.