feat(pivot-table): truncate title and show full in tooltip (DHIS2-14827) #1579
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
HendrikThePendric
force-pushed
the
DHIS2-14827-pivot-table-header-ellipsis
branch
from
49dac2b
to
6a716b1
Compare
HendrikThePendric
requested review from
martinkrulltott and
janhenrikoverland
martinkrulltott
approved these changes
Sep 14, 2023
HendrikThePendric
force-pushed
the
DHIS2-14827-pivot-table-header-ellipsis
branch
from
9aa8776
to
2a47d1a
Compare
martinkrulltott
approved these changes
Sep 15, 2023
HendrikThePendric
force-pushed
the
DHIS2-14827-pivot-table-header-ellipsis
branch
from
2a47d1a
to
adba099
Compare
HendrikThePendric
force-pushed
the
DHIS2-14827-pivot-table-header-ellipsis
branch
from
338b549
to
89de6cf
Compare
HendrikThePendric
force-pushed
the
DHIS2-14827-pivot-table-header-ellipsis
branch
from
0e147af
to
fc1cd4c
Compare
martinkrulltott
approved these changes
Oct 3, 2023
dhis2-bot
added a commit
that referenced
this pull request
Oct 3, 2023
# [26.1.0](v26.0.21...v26.1.0) (2023-10-03) ### Features * **pivot-table:** truncate title and show full in tooltip ([#1579](#1579)) ([c37ba2d](c37ba2d))
|
🎉 This PR is included in version 26.1.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
janhenrikoverland
changed the title
HendrikThePendric
added a commit
that referenced
this pull request
Jan 30, 2024
* feat(pivot-table): truncate title and show full in tooltip * fix(pivot-table): set padding on hoverable div instead of container th * fix(pivot-table): correctly show tooltip after resizing the container * chore: simplify code and remove redundant prop
HendrikThePendric
added a commit
that referenced
this pull request
Jan 30, 2024
* feat(pivot-table): truncate title and show full in tooltip * fix(pivot-table): set padding on hoverable div instead of container th * fix(pivot-table): correctly show tooltip after resizing the container * chore: simplify code and remove redundant prop
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Implements DHIS2-14827
Key features
Description
Before adding the tooltip functionality, I also addressed a small bug: the
max-widthfordiv.title-cell-contentdidn't take into account the cell padding and border and as such the value was a bit too high.The tooltip is only added if the title text is overflowing the container.
I also added a story to demo the feature.
Considerations
div.title-cell-content, which is the tooltip anchor element, has 5px of whitespace around it. So the tooltip only shows when hovering the actual text, not the entire table cell. I'm not sure if this is a bug or a feature. I think changing this behaviour should be relatively simple, but just not sure whether we want to.TODO
Screenshots