Skip to content

feat: increase tooltip width to 500px and truncate items to 2 lines#2261

Merged
mbondyra merged 2 commits intoelastic:mainfrom
mbondyra:tooltip/long_names
Nov 29, 2023
Merged

feat: increase tooltip width to 500px and truncate items to 2 lines#2261
mbondyra merged 2 commits intoelastic:mainfrom
mbondyra:tooltip/long_names

Conversation

@mbondyra
Copy link
Copy Markdown
Contributor

@mbondyra mbondyra commented Nov 28, 2023 •
edited
Loading

Summary

Fixes #2048 (I am not sure if we consider this issue fixed after merging this one)

Auto-expands the tooltip containter to 500px for wider content. The data items in the tooltip now truncate to 2 lines instead of just one.

Screenshot 2023-11-28 at 15 06 15 Screenshot 2023-11-28 at 15 05 32

@mbondyra mbondyra added the :tooltip Related to hover tooltip label Nov 28, 2023
@mbondyra mbondyra force-pushed the tooltip/long_names branch 2 times, most recently from 821cc38 to 4a140b7 Compare November 28, 2023 14:16
@mbondyra mbondyra changed the title [tooltip] increase tooltip width to 500px and truncate items to 2 lines feat: increase tooltip width to 500px and truncate items to 2 lines Nov 28, 2023
markov00
markov00 reviewed Nov 28, 2023
View reviewed changes
@mbondyra mbondyra marked this pull request as ready for review November 28, 2023 16:27
@mbondyra
Copy link
Copy Markdown
Contributor Author

mbondyra commented Nov 28, 2023

Thank you @markov00 great tips! I addressed all your comments! 🙇🏼‍♀️

@markov00 markov00 added enhancement New feature or request :all Applies to all chart types labels Nov 29, 2023
@markov00 markov00 self-requested a review November 29, 2023 09:07
markov00
markov00 approved these changes Nov 29, 2023
View reviewed changes
Copy link
Copy Markdown
Collaborator

@markov00 markov00 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Changes looks good to me, tested on deployed storybook.
Just re-generate the changed screenshots from the CI rather than from the local machine to correctly match with what the CI is going to match.

@mbondyra
Copy link
Copy Markdown
Contributor Author

mbondyra commented Nov 29, 2023

buildkite update vrt

@mbondyra mbondyra enabled auto-merge (squash) November 29, 2023 09:42
@mbondyra mbondyra merged commit afdef1c into elastic:main Nov 29, 2023
@mbondyra mbondyra deleted the tooltip/long_names branch November 29, 2023 11:24
markov00 pushed a commit to markov00/elastic-charts that referenced this pull request Dec 6, 2023
@mbondyra @markov00
feat: increase tooltip width to 500px and truncate items to 2 lines (e…
578f078 
…lastic#2261)

feat: truncate to 2 + width 500
# Conflicts:
#	e2e/screenshots/legend_stories.test.ts-snapshots/legend-stories/should-break-multiline-legends-with-long-url-characters-chrome-linux.png
@markov00 markov00 mentioned this pull request Dec 6, 2023
Closed
markov00 added a commit to markov00/elastic-charts that referenced this pull request Dec 7, 2023
@markov00
style(tooltip): increase tooltip width to 500px and truncate items to…
bde26e4 
… 2 lines (elastic#2261)
@markov00 markov00 mentioned this pull request Dec 7, 2023
Merged
markov00 added a commit to markov00/elastic-charts that referenced this pull request Dec 7, 2023
@markov00
style(tooltip): increase tooltip width to 500px and truncate items to…
14dc6d9 
… 2 lines (elastic#2261)
markov00 added a commit that referenced this pull request Dec 7, 2023
@markov00
style(tooltip): increase width to 500px and 2 lines items (#2261) (#2275
465a6bc 
)

Backport of #2261
nickofthyme pushed a commit that referenced this pull request Dec 19, 2023
@semantic-release-bot
chore(release): 61.2.0 [skip ci]
dc705ad 
# [61.2.0](v61.1.0...v61.2.0) (2023-12-19)

### Bug Fixes

* **deps:** update dependency @elastic/eui to ^91.1.0 ([#2267](#2267)) ([308e974](308e974))
* **deps:** update dependency @elastic/eui to ^91.2.0 ([#2268](#2268)) ([29cdcb3](29cdcb3))
* **metric:** background colors and sparkline rendering ([#2255](#2255)) ([5abddfc](5abddfc))
* **partition:** rendering with small radius ([#2273](#2273)) ([95a8537](95a8537))
* **partition:** zero value sectors cause max stack call ([#2260](#2260)) ([4b30db7](4b30db7))
* **theme:** legacy margins ([#2262](#2262)) ([299c869](299c869))

### Features

* increase tooltip width to 500px and truncate items to 2 lines ([#2261](#2261)) ([afdef1c](afdef1c))
@markov00 markov00 mentioned this pull request Dec 20, 2023
Merged
1 task
markov00 added a commit to elastic/kibana that referenced this pull request Dec 21, 2023
@renovate @markov00
Update dependency @elastic/charts to v61.2.0 (main) (#173329)
68883b3 
[![Mend
Renovate](https://app.renovatebot.com/images/banner.svg)](https://renovatebot.com)

This PR contains the following updates:

| Package | Change | Age | Adoption | Passing | Confidence |
|---|---|---|---|---|---|
| [@elastic/charts](https://togithub.com/elastic/elastic-charts) |
[`61.0.3` ->
`61.2.0`](https://renovatebot.com/diffs/npm/@elastic%2fcharts/61.0.3/61.2.0)
|
[![age](https://developer.mend.io/api/mc/badges/age/npm/@elastic%2fcharts/61.2.0?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![adoption](https://developer.mend.io/api/mc/badges/adoption/npm/@elastic%2fcharts/61.2.0?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![passing](https://developer.mend.io/api/mc/badges/compatibility/npm/@elastic%2fcharts/61.0.3/61.2.0?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/@elastic%2fcharts/61.0.3/61.2.0?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|

---

### Release Notes

<details>
<summary>elastic/elastic-charts (@&#8203;elastic/charts)</summary>

###
[61.2.0](elastic/elastic-charts@v61.1.0...v61.2.0)
(2023-12-19)


##### Bug Fixes

* **deps:** update dependency @elastic/eui to ^91.1.0
([#2267](elastic/elastic-charts#2267))
([308e974](elastic/elastic-charts@308e974))
* **deps:** update dependency @elastic/eui to ^91.2.0
([#2268](elastic/elastic-charts#2268))
([29cdcb3](elastic/elastic-charts@29cdcb3))
* **metric:** background colors and sparkline rendering
([#2255](elastic/elastic-charts#2255))
([5abddfc](elastic/elastic-charts@5abddfc))
* **partition:** rendering with small radius
([#2273](elastic/elastic-charts#2273))
([95a8537](elastic/elastic-charts@95a8537))
* **partition:** zero value sectors cause max stack call
([#2260](elastic/elastic-charts#2260))
([4b30db7](elastic/elastic-charts@4b30db7))
* **theme:** legacy margins
([#2262](elastic/elastic-charts#2262))
([299c869](elastic/elastic-charts@299c869))


##### Features

* increase tooltip width to 500px and truncate items to 2 lines
([#2261](elastic/elastic-charts#2261))
([afdef1c](elastic/elastic-charts@afdef1c))

###
[`v61.1.0`](https://togithub.com/elastic/elastic-charts/blob/HEAD/CHANGELOG.md#6110-2023-11-20)

[Compare
Source](https://togithub.com/elastic/elastic-charts/compare/v61.0.3...v61.1.0)

##### Bug Fixes

- **deps:** update dependency
[@&#8203;elastic/eui](https://togithub.com/elastic/eui) to v91
([#&#8203;2233](https://togithub.com/elastic/elastic-charts/issues/2233))
([e89f623](https://togithub.com/elastic/elastic-charts/commit/e89f623792312c4f6b609ebb975de0800f3c297e))
- **metric:** add option to set empty cell background color
([#&#8203;2247](https://togithub.com/elastic/elastic-charts/issues/2247))
([6a9fb86](https://togithub.com/elastic/elastic-charts/commit/6a9fb86bee5212a47060c5070f260961097014b4))
- **metric:** background color for bar with interactions
([#&#8203;2248](https://togithub.com/elastic/elastic-charts/issues/2248))
([dcb56fa](https://togithub.com/elastic/elastic-charts/commit/dcb56fa08540631a9b3b0e588352ee6daf3d54a0))

##### Features

- **bullet:** improve header layout and positioning
([#&#8203;2243](https://togithub.com/elastic/elastic-charts/issues/2243))
([b3a95d2](https://togithub.com/elastic/elastic-charts/commit/b3a95d24fb02690ca6599622352c743c04624690))
- **bullet:** new design style and implementation
([#&#8203;2156](https://togithub.com/elastic/elastic-charts/issues/2156))
([fca6cdd](https://togithub.com/elastic/elastic-charts/commit/fca6cdd5bc34a65c0792dbab7d756404bf43501b))

</details>

---

### Configuration

📅 **Schedule**: Branch creation - At any time (no schedule defined),
Automerge - At any time (no schedule defined).

🚦 **Automerge**: Disabled by config. Please merge this manually once you
are satisfied.

♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the
rebase/retry checkbox.

🔕 **Ignore**: Close this PR and you won't be reminded about this update
again.

---

- [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check
this box

---

This PR has been generated by [Mend
Renovate](https://www.mend.io/free-developer-tools/renovate/). View
repository job log
[here](https://developer.mend.io/github/elastic/kibana).

<!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzNy44Ny4yIiwidXBkYXRlZEluVmVyIjoiMzcuMTAzLjEiLCJ0YXJnZXRCcmFuY2giOiJtYWluIn0=-->

---------

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Marco Vettorello <marco.vettorello@elastic.co>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@markov00 markov00 markov00 approved these changes

Assignees

No one assigned

Labels

:all Applies to all chart types enhancement New feature or request :tooltip Related to hover tooltip

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[tooltip] Reconsider tooltip min-width and label truncations

2 participants

@mbondyra @markov00