fix(table): change tooltips to carbon-like

[erzhan-temir-mamyrov]

Closes #3510

Summary

• Change appearance of tooltips to carbon-like

Change List (commits, features, bugs, etc)

• Change kind prop in TableToolbarSVGButton to enable carbon tooltip in button
• Add i18n for icon description in TableToolbarAdvancedFilterFlyout
• Remove native browser tooltips
• Update test selector from getByTitle to getById or getByText
• Update storyshots

Acceptance Test (how to verify the PR)

• Go to this story
• Enable toolbarAction, customToolbarContent, Demo download data as CSV under "Toolbar" knob tab in order to see toolbar action buttons
• Change hasFilter value to true in "Sort & filter" knob tab to see filter action button
• Hover on the action buttons in table toolbar in order to see carbon tooltips.

• Go to this story
• Change hasFilter value to true in knobs to see filter action button
• Hover on the action buttons in table toolbar in order to see carbon tooltips.

• Go to this story
• Enable customToolbarContent, Demo download data as CSV in knobs to see toolbar action buttons
• Hover on the action buttons in table toolbar in order to see carbon tooltips.

• Go to this story
• Enable hasRowEdit in knobs to see edit button
• Hover on the button in table toolbar in order to see carbon tooltips.

• Go to this story
• Hover on the action buttons in table toolbar in order to see carbon tooltips.

• Go to this story
• Hover on button to expand row.
• Verify that carbon tooltip has appeared.

Regression Test (how to make sure this PR doesn't break old functionality)

• tests here

Things to look for during review

• [ ] Make sure all references to iot or bx class prefix is using the prefix variable
• [ ] (React) All major areas have a data-testid attribute. New test ids should have test written to ensure they are not changed or removed.
• [ ] UI should be checked in RTL mode to ensure the proper handling of layout and text.
• [ ] All strings should be translatable.
• [ ] The code should pass a11y scans (The storybook a11y knob should show no violations). New components should have a11y test written.
• [ ] Unit test should be written and should have a coverage of 90% or higher in all areas.
• [ ] All components should be passing visual regression test. For new styles or components either a visual regression test should be written for all permutations or the base image updated.
• [ ] Changes or new components should either write new or update existing documentation.
• [ ] PR should link and close out an existing issue

[netlify[bot]]

✅ Deploy Preview for carbon-addons-iot-react ready!

Name	Link
🔨 Latest commit	c23d387ea34dc17e6c03fc6d0fbe7133dc2480c4
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-addons-iot-react/deploys/63752d1a35314c000a1f2c22
😎 Deploy Preview	https://deploy-preview-3541--carbon-addons-iot-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 settings.

[netlify[bot]]

✅ Deploy Preview for ai-apps-pal-angular ready!

Name	Link
🔨 Latest commit	c23d387ea34dc17e6c03fc6d0fbe7133dc2480c4
🔍 Latest deploy log	https://app.netlify.com/sites/ai-apps-pal-angular/deploys/63752d1ac1267a0009e869cd
😎 Deploy Preview	https://deploy-preview-3541--ai-apps-pal-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 settings.

[erzhan-temir-mamyrov]

@davidicus Hello! I would like to ask for an advise. Some of the action buttons come from Carbon and tooltip is integrated as title tag. What could be the best approach to convert these tooltips to carbon-like? I was thinking of creating a wrapper for it which would substitute native browser tooltips to carbon-like. Example of Carbon title tooltip in Table With row expansion story Another example is Overflow menu in Playground story

[kevinmweaver]

@erzhan-temir-mamyrov @davidicus I would use the carbon-style tooltip and have the position be above the arrow at the end of the tooltip like this.

[sls-ca]

@kevinmweaver @davidicus @erzhan-temir-mamyrov If we are using the carbon tooltips, then let's verify that they work in RTL mode. I suspect that carbon accounts for this but let's just verify that when in RTL mode that the tooltips don't flow off the left side of the screen.

[davidicus]

When I put the story, from the first test, into RTL mode, a horizontal scrollbar is created. I also see the tooltip on the overflow menu being rendered off screen in RTL when the custom content knob is not clicked.

[erzhan-temir-mamyrov]

@davidicus Thanks for the feedback! I will fix it.