feat(toolbar): add tooltips #1766

markchou0225 · 2024-02-25T07:03:40Z

Updates

Add tooltip (with top placement) for toolbars
Expose more translation strings

Some testing

Mouse hovering on toolbar and it should display the tooltips
Using tab can trigger toolbar focus and display the tooltips
Hover the label title -> press tab to get toolbar focus -> move mouse over the label title should still see consistent tooltip content.
Can apply following options to check translated strings
https://deploy-preview-1766--carbon-charts-angular.netlify.app/?path=/story/utility-truncations--truncated-labels-simple-bar
Repeat 1-4 in full screen mode

{
    "title": "Truncated labels (simple bar)",
      "locale": {
      "translations": {
        "toolbar": {
          "makeFullScreen": "進入全螢幕",
          "exitFullScreen": "離開全螢幕",
          "showAsTable": "顯示為表格",
          "moreOptions": "更多選項",
          "exportAsCSV": "轉存為CSV",
          "exportAsJPG": "轉存為JPG",
          "exportAsPNG": "轉存為PNG"
          }
      },
    "axes": {
      "left": {
        "mapsTo": "group",
        "scaleType": "labels",
        "truncation": {
          "type": "mid_line",
          "threshold": 10,
          "numCharacter": 14
        }
      },
      "bottom": {
        "mapsTo": "value"
      }
    },
    "legend": {
      "truncation": {
        "type": "mid_line",
        "threshold": 15,
        "numCharacter": 12
      }
    },
    "height": "400px",
    "theme": "g100"
  }
}

Demo screenshot or recording

Hovering toolbar and shows translation strings (g10 theme)

Using tab to focus toolbar and shows translation strings (g100 theme)

netlify · 2024-02-25T07:03:57Z

✅ Deploy Preview for carbon-charts-core ready!

Name	Link
🔨 Latest commit	`d1ae2ab`
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-charts-core/deploys/65e741fdc8cb6e0008a70836
😎 Deploy Preview	https://deploy-preview-1766--carbon-charts-core.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

netlify · 2024-02-25T07:03:57Z

✅ Deploy Preview for carbon-charts-angular ready!

Name	Link
🔨 Latest commit	`d1ae2ab`
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-charts-angular/deploys/65e741fd4bc31f0008837fad
😎 Deploy Preview	https://deploy-preview-1766--carbon-charts-angular.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

netlify · 2024-02-25T07:03:58Z

✅ Deploy Preview for carbon-charts-react ready!

Name	Link
🔨 Latest commit	`d1ae2ab`
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-charts-react/deploys/65e741fde955d600093f59fd
😎 Deploy Preview	https://deploy-preview-1766--carbon-charts-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

markchou0225 · 2024-02-25T14:27:21Z

packages/core/src/components/axes/toolbar.ts

@@ -101,12 +101,26 @@ export class Toolbar extends Component {
 				.each(function (d: any, index: number) {
 					select(this)
 						.select('svg')
+						.style('pointer-events', 'none')


Disable pointer-events of svg as we only want event emitted by button.

markchou0225 · 2024-02-25T14:33:10Z

packages/core/src/components/essentials/tooltip.ts

-			if (this.tooltip.classed('hidden') === false) {
+			if (this.lastTriggeredEventType !== Events.Toolbar.SHOW_TOOLTIP &&
+				this.tooltip.classed('hidden') === false
+			) {


I have to keep this lastTriggeredEventType to prevent a display issue when combining keyboard and mouse.

Can use following steps to verify on:
https://deploy-preview-1766--carbon-charts-angular.netlify.app/?path=/story/utility-truncations--truncated-labels-simple-bar

Put to mouse over truncated label title --> See the tooltip

Keep pressing Tab until one of the toolbar (e.g.: Show as table) got focus and show the tooltip.

Slightly move the mouse over truncated label title
--->
The tooltip will be shown as "Show as table", but not the label title if lastTriggeredEventType is not used here.

RiyaJethwa · 2024-02-27T11:59:46Z

packages/core/src/components/essentials/tooltip.ts

@@ -110,6 +125,10 @@ export class Tooltip extends Component {

 		// remove the listener on chart-mouseout
 		this.services.events.removeEventListener(Events.Chart.MOUSEOUT, this.handleHideTooltip)
+
+		// remote the listener of the toolbar


Kindly correct the spelling for remove.

Thank you @RiyaJethwa.
Append commit 351a4b0 to fix it and also do a rebase.

theiliad · 2024-02-27T20:17:07Z

@markchou0225 thank you 🙌🏻

I think we should fix this issue

there's enough room on both sides, the tooltip shouldn't really wrap into 2 lines

markchou0225 · 2024-02-28T01:46:15Z

Thank you @theiliad,
mark as WIP and will append a commit for this

markchou0225 · 2024-02-28T12:10:01Z

Hi @theiliad,

The tooltip is made to be with a centered-top placement. The wrapped div behavior is caused by its width not exceed to the chart holder.

Before commit (wrapped div)

New commit (non-wrapped):

Tried one of the solutions in commit cf4c417 to make the toolbar tooltips always non-wrapped. The assumption is that all charts may have enough padding in user pages. Another way I can think of is to shift the toolbar to the left about 1~2rem. Can do further adjustments or even expose options in the future. 🤠

theiliad

@markchou0225 I think we're almost there. I'm just noticing another bug where if there's no room in the top of the chart, the tooltip still shows up to the top

it should really use our position util to figure out where to place itself

markchou0225 · 2024-02-29T17:35:58Z

Hi @theiliad,

Okay, I removed the added static placement in my first commit(19ac243) and use the existed positioning logic. It would go left/right now.

theiliad · 2024-02-29T20:15:15Z

Hi @theiliad,

Okay, I removed the added static placement in my first commit(19ac243) and use the existed positioning logic. It would go left/right now.

@markchou0225 sorry for the back and fourth, but there must be a nicer way to position them.

Could we maybe check if there are placements that are open, and place them centered to that placement?

E.g. if top open, place in center-top, if not, bottom-center, if right is not open, left-center etc...

markchou0225 · 2024-03-01T06:40:25Z

packages/core/src/components/axes/toolbar.ts

+								noWrap: true,
+								placements: ['top', 'bottom']


Hi @theiliad,

Thanks for the reviewing, now we would support multiple candidates for .findBestPlacement() to determine the best placement.

theiliad

Sorry @markchou0225 again for the back and fourth, but could you pls just make sure that the tooltip does show up in the right place?

If I move chart to the top of the page, the tooltip still tries to show up in the top, and I can't see it

markchou0225 · 2024-03-01T18:01:10Z

Hi @theiliad,

Sorry I miss that, append commit 6a83bfb and hope that should do the trick. But as the toolbar is very close to the chart-holder, we probably never see top placement now. Please refer to the demo GIF below: the top placement will only appear if I add some padding-top to the chart-holder.

markchou0225 · 2024-03-05T16:04:31Z

Hi @theiliad,
Sorry for my misunderstanding. I just realize what you mean. Please find the demo gif below with the updated commit d1ae2ab. Thank you~

theiliad

LGTM

theiliad · 2024-03-05T18:16:25Z

thank you @markchou0225 🙌🏻

markchou0225 requested review from theiliad and a team as code owners February 25, 2024 07:03

markchou0225 force-pushed the story/1549-tooltips-of-toolbar branch from aeb9c65 to d879004 Compare February 25, 2024 07:05

markchou0225 changed the title ~~feat(toolbar): add tooltips~~ WIP: feat(toolbar): add tooltips Feb 25, 2024

markchou0225 force-pushed the story/1549-tooltips-of-toolbar branch 2 times, most recently from 6bfc973 to e50106f Compare February 25, 2024 14:14

markchou0225 changed the title ~~WIP: feat(toolbar): add tooltips~~ feat(toolbar): add tooltips Feb 25, 2024

markchou0225 force-pushed the story/1549-tooltips-of-toolbar branch from e50106f to c3a77eb Compare February 25, 2024 14:25

markchou0225 commented Feb 25, 2024

View reviewed changes

RiyaJethwa reviewed Feb 27, 2024

View reviewed changes

markchou0225 force-pushed the story/1549-tooltips-of-toolbar branch 2 times, most recently from fff8fa9 to 351a4b0 Compare February 27, 2024 14:08

markchou0225 requested a review from RiyaJethwa February 27, 2024 14:27

markchou0225 changed the title ~~feat(toolbar): add tooltips~~ WIP: feat(toolbar): add tooltips Feb 28, 2024

markchou0225 force-pushed the story/1549-tooltips-of-toolbar branch 2 times, most recently from 174d4e4 to cf4c417 Compare February 28, 2024 11:57

markchou0225 changed the title ~~WIP: feat(toolbar): add tooltips~~ feat(toolbar): add tooltips Feb 28, 2024

theiliad requested changes Feb 29, 2024

View reviewed changes

markchou0225 force-pushed the story/1549-tooltips-of-toolbar branch from cf4c417 to 7ed85b1 Compare February 29, 2024 17:25

markchou0225 requested a review from theiliad February 29, 2024 17:25

markchou0225 force-pushed the story/1549-tooltips-of-toolbar branch from 7ed85b1 to ffd19d7 Compare March 1, 2024 06:28

markchou0225 commented Mar 1, 2024

View reviewed changes

markchou0225 force-pushed the story/1549-tooltips-of-toolbar branch 2 times, most recently from 4a6741b to e17ac8c Compare March 1, 2024 07:05

theiliad requested changes Mar 1, 2024

View reviewed changes

markchou0225 added 5 commits March 2, 2024 01:53

feat(toolbar): add tooltips

00a95e3

feat(toolbar): add default translation strings

58a3e39

fix: typos in comments and rebase

ae4064e

fix: no wrap for toolbar tooltip

3c065ad

feat(toolbar): Allow dynamic placements

2a0c81f

markchou0225 force-pushed the story/1549-tooltips-of-toolbar branch from 2ff29d0 to 6a83bfb Compare March 1, 2024 17:53

markchou0225 requested a review from theiliad March 1, 2024 17:53

fix(toolbar): tooltip placement

d1ae2ab

markchou0225 force-pushed the story/1549-tooltips-of-toolbar branch from 6a83bfb to d1ae2ab Compare March 5, 2024 16:02

theiliad approved these changes Mar 5, 2024

View reviewed changes

theiliad merged commit d8189d8 into carbon-design-system:master Mar 5, 2024
4 checks passed

markchou0225 deleted the story/1549-tooltips-of-toolbar branch March 8, 2024 10:49

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(toolbar): add tooltips #1766

feat(toolbar): add tooltips #1766

markchou0225 commented Feb 25, 2024 •

edited

netlify bot commented Feb 25, 2024 •

edited

netlify bot commented Feb 25, 2024 •

edited

netlify bot commented Feb 25, 2024 •

edited

markchou0225 Feb 25, 2024

markchou0225 Feb 25, 2024 •

edited

RiyaJethwa Feb 27, 2024

markchou0225 Feb 27, 2024

theiliad commented Feb 27, 2024

markchou0225 commented Feb 28, 2024

markchou0225 commented Feb 28, 2024 •

edited

theiliad left a comment

markchou0225 commented Feb 29, 2024 •

edited

theiliad commented Feb 29, 2024

markchou0225 Mar 1, 2024 •

edited

theiliad left a comment

markchou0225 commented Mar 1, 2024

markchou0225 commented Mar 5, 2024

theiliad left a comment

theiliad commented Mar 5, 2024

feat(toolbar): add tooltips #1766

feat(toolbar): add tooltips #1766

Conversation

markchou0225 commented Feb 25, 2024 • edited

Updates

Some testing

Demo screenshot or recording

netlify bot commented Feb 25, 2024 • edited

✅ Deploy Preview for carbon-charts-core ready!

netlify bot commented Feb 25, 2024 • edited

✅ Deploy Preview for carbon-charts-angular ready!

netlify bot commented Feb 25, 2024 • edited

✅ Deploy Preview for carbon-charts-react ready!

markchou0225 Feb 25, 2024

Choose a reason for hiding this comment

markchou0225 Feb 25, 2024 • edited

Choose a reason for hiding this comment

RiyaJethwa Feb 27, 2024

Choose a reason for hiding this comment

markchou0225 Feb 27, 2024

Choose a reason for hiding this comment

theiliad commented Feb 27, 2024

markchou0225 commented Feb 28, 2024

markchou0225 commented Feb 28, 2024 • edited

theiliad left a comment

Choose a reason for hiding this comment

markchou0225 commented Feb 29, 2024 • edited

theiliad commented Feb 29, 2024

markchou0225 Mar 1, 2024 • edited

Choose a reason for hiding this comment

theiliad left a comment

Choose a reason for hiding this comment

markchou0225 commented Mar 1, 2024

markchou0225 commented Mar 5, 2024

theiliad left a comment

Choose a reason for hiding this comment

theiliad commented Mar 5, 2024

markchou0225 commented Feb 25, 2024 •

edited

netlify bot commented Feb 25, 2024 •

edited

netlify bot commented Feb 25, 2024 •

edited

netlify bot commented Feb 25, 2024 •

edited

markchou0225 Feb 25, 2024 •

edited

markchou0225 commented Feb 28, 2024 •

edited

markchou0225 commented Feb 29, 2024 •

edited

markchou0225 Mar 1, 2024 •

edited