diff --git a/packages/v4/patternfly-docs/content/design-guidelines/components/tooltip/img/tooltip-on-bar-chart.png b/packages/v4/patternfly-docs/content/design-guidelines/components/tooltip/img/tooltip-on-bar-chart.png new file mode 100644 index 0000000000..487554b7d4 Binary files /dev/null and b/packages/v4/patternfly-docs/content/design-guidelines/components/tooltip/img/tooltip-on-bar-chart.png differ diff --git a/packages/v4/patternfly-docs/content/design-guidelines/components/tooltip/img/tooltip-on-disabled-button.png b/packages/v4/patternfly-docs/content/design-guidelines/components/tooltip/img/tooltip-on-disabled-button.png new file mode 100644 index 0000000000..6ed784fb8d Binary files /dev/null and b/packages/v4/patternfly-docs/content/design-guidelines/components/tooltip/img/tooltip-on-disabled-button.png differ diff --git a/packages/v4/patternfly-docs/content/design-guidelines/components/tooltip/img/tooltip-on-hyperlink.png b/packages/v4/patternfly-docs/content/design-guidelines/components/tooltip/img/tooltip-on-hyperlink.png new file mode 100644 index 0000000000..9f638c413e Binary files /dev/null and b/packages/v4/patternfly-docs/content/design-guidelines/components/tooltip/img/tooltip-on-hyperlink.png differ diff --git a/packages/v4/patternfly-docs/content/design-guidelines/components/tooltip/img/tooltip-on-unlabeled-icons.png b/packages/v4/patternfly-docs/content/design-guidelines/components/tooltip/img/tooltip-on-unlabeled-icons.png new file mode 100644 index 0000000000..8448b34649 Binary files /dev/null and b/packages/v4/patternfly-docs/content/design-guidelines/components/tooltip/img/tooltip-on-unlabeled-icons.png differ diff --git a/packages/v4/patternfly-docs/content/design-guidelines/components/tooltip/tooltip.md b/packages/v4/patternfly-docs/content/design-guidelines/components/tooltip/tooltip.md index 72f8a981ad..936f3ff9d9 100644 --- a/packages/v4/patternfly-docs/content/design-guidelines/components/tooltip/tooltip.md +++ b/packages/v4/patternfly-docs/content/design-guidelines/components/tooltip/tooltip.md @@ -9,15 +9,19 @@ For information on other forms of on-screen help, see [popover](/components/popo Use tooltips to: - Provide labels for unlabeled icons. -kebab icon with a “More options” tooltip label + table with tooltip on an unlabeled kebab icon to provide more information - Provide additional information on a data point or element in a chart or table. -bar chart with a tooltip for Asia Pacific + bar chart with a tooltip on data point to describe it as Asia Pacific - Define new or unfamiliar UI elements that aren’t described directly in the user interface. For example, you can use a tooltip on a disabled button. -disabled edit button with a tooltip about access + table with tooltip on a disabled edit button to provide more information regarding access + +- Provide additional information on text or labels on hover. A way for users to see more information before clicking the element and being directed to a new page or producing an action on the page. + + table with tooltip on clickable text to provide more information ### Tooltip delay on hover By default, tooltips have a 300ms entry delay when hovering over an object. Although this is the recommended delay time, you may customize it via prop. For example, if you have a tooltip on an icon, and you would like for it to appear immediately on hover, you may set the delay to 0 ms.