@iress-oss/ids-mcp-server 6.0.0-alpha.1-canary-20251204032753-fe18cab → 6.0.0-alpha.1-canary-20251204040305-3639454

package/generated/docs/components_components-tooltip-docs.md

@@ -0,0 +1,564 @@
+Tooltip
+=======
+
+Overview
+--------
+
+A component that shows concise, informative text about an element when focussed upon, hovered over or on a long touch.
+
+* * *
+
+Updated
+
+**Recently updated**
+
+This component has been recently updated with new props. The props have been marked as beta. Please tell us if there are any issues.
+
+[](./iframe.html?id=components-tooltip--default)
+
+Hover me
+
+```
+
+<IressTooltip tooltipText\="Hello! This is a really long tooltip to try and see if it goes behind the scrollbar"\>
+  <IressButton\>
+    Hover me  </IressButton\>
+</IressTooltip\>
+
+```
+
+Props
+-----
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| align | 
+Sets the alignment of the popover relative to the activator element.
+
+FloatingUIAligns
+
+
+
+ | 
+
+'top'
+
+ | Set object |
+| children\* | 
+
+The element to add a tooltip to.
+
+ReactNode
+
+
+
+ | \- | \- |
+| delay | 
+
+Sets the tooltip display delay in milliseconds.
+
+number
+
+
+
+ | 
+
+500
+
+ | Set number |
+| open | 
+
+Only used for internal testing.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | \- |
+| tooltipText\* | 
+
+Sets the tooltip text. Can accept a string or an array of strings - if given an array, will output each string on a new line.
+
+union
+
+
+
+ | \- | 
+
+"Hello! This is a really long tooltip to try and see if it goes behind the scrollbar"
+
+ |
+
+Usage
+-----
+
+The content that will be displayed in the tooltip is passed using the `tooltipText` prop.
+
+This content can only be plain text; there is no parsing of any markup or styling. This is by design as we do not allow complex structures in a tooltip as they are meant to be concise, informative pieces of text.
+
+Text content will wrap on to a new line if it exceeds the tooltip's maximum width. You can also manually format your content into multiple lines by passing an array of strings into the `tooltipText` prop.
+
+[](./iframe.html?id=components-tooltip--tooltip-text)
+
+Single line
+
+Multi line
+
+```
+
+<div
+  style\={{
+    paddingTop: '30px'
+  }}
+\>
+  <IressInline gap\="md"\>
+    <IressTooltip tooltipText\="Single line Hello! This is a really long tooltip to try and see if it goes behind the scrollbar"\>
+      <IressButton\>
+        Single line      </IressButton\>
+    </IressTooltip\>
+    <IressTooltip
+      tooltipText\={\[
+        'This tooltip',
+        'has multiple lines'
+      \]}
+    \>
+      <IressButton\>
+        Multi line      </IressButton\>
+    </IressTooltip\>
+  </IressInline\>
+</div\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| align | 
+Sets the alignment of the popover relative to the activator element.
+
+FloatingUIAligns
+
+
+
+ | 
+
+'top'
+
+ | Set object |
+| children\* | 
+
+The element to add a tooltip to.
+
+ReactNode
+
+
+
+ | \- | \- |
+| delay | 
+
+Sets the tooltip display delay in milliseconds.
+
+number
+
+
+
+ | 
+
+500
+
+ | Set number |
+| open | 
+
+Only used for internal testing.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | \- |
+| tooltipText\* | 
+
+Sets the tooltip text. Can accept a string or an array of strings - if given an array, will output each string on a new line.
+
+union
+
+
+
+ | \- | Set object |
+
+Behaviour
+---------
+
+The behaviour of tooltips varies according to how they're shown:
+
+*   When a pointer is moved over the activator the tooltip will be shown, and will remain visible for a short period of time after the pointer has moved away (500ms is the default time)
+*   If the activator receives keyboard focus the tooltip will be visible. The tooltip will hide immediately after the focus moves away from the activator.
+*   If the user long presses on the activator (on a touch device). The tooltip will remain visible until the user taps somewhere else on the screen
+
+If the user activates a tooltip via a pointing device and then moves the pointer over the tooltip, it will remain on screen until the pointer is moved away. This is for accessibility purposes where a user may be using magnifying software for example.
+
+Accessibility
+-------------
+
+The WCAG guidelines for content that is displayed on hover or focus can be found here: [WCAG 2.1 - 1.4.13 (AA)](https://www.w3.org/TR/WCAG21/#content-on-hover-or-focus).
+
+Other things to keep in mind:
+
+*   For best accessibility, you should only use tooltips on focusable items (eg. `IressButton` and `IressMenuItem`), allowing them to be seen when navigating to the tooltip activator by keyboard
+
+**Notes:**
+
+*   If the text you wish to display is more than a handful of words then consider using an IressModal with an information button.
+*   Tooltips must not be used for help text as they are not immediately visible to the user. We suggest adding hint text to assist the user when filling out forms.
+*   Also think about placement using the align prop. The tooltip should not obscure any critical screen content. Another reason to keep them short.
+
+Examples
+--------
+
+### Align
+
+The tooltip can be aligned in one of 12 positions relative to the activator element.
+
+The tooltip's position will change dynamically based on the amount of space available in its container window, so that it doesn't overflow the edge. For example, if the tooltip is about to scroll off the top of the screen, it will change its position to bottom. Likewise with left and right scrolling.
+
+[](./iframe.html?id=components-tooltip--align)
+
+Top Start
+
+Top
+
+Top End
+
+Left Start
+
+Left
+
+Left End
+
+Right Start
+
+Right
+
+Right End
+
+Bottom Start
+
+Bottom
+
+Bottom End
+
+```
+
+<div
+  style\={{
+    padding: '80px 150px'
+  }}
+\>
+  <IressStack gap\="md"\>
+    <IressInline
+      gap\="sm"
+      horizontalAlign\="center"
+    \>
+      <IressTooltip
+        align\="top-start"
+        tooltipText\="Hello!"
+      \>
+        <IressButton\>
+          Top Start        </IressButton\>
+      </IressTooltip\>
+      <IressTooltip
+        align\="top"
+        tooltipText\="Hello!"
+      \>
+        <IressButton\>
+          Top        </IressButton\>
+      </IressTooltip\>
+      <IressTooltip
+        align\="top-end"
+        tooltipText\="Hello!"
+      \>
+        <IressButton\>
+          Top End        </IressButton\>
+      </IressTooltip\>
+    </IressInline\>
+    <IressInline horizontalAlign\="between"\>
+      <IressStack gap\="sm"\>
+        <IressInline horizontalAlign\="left"\>
+          <IressTooltip
+            align\="left-start"
+            tooltipText\="Hello!"
+          \>
+            <IressButton\>
+              Left Start            </IressButton\>
+          </IressTooltip\>
+        </IressInline\>
+        <IressInline horizontalAlign\="left"\>
+          <IressTooltip
+            align\="left"
+            tooltipText\="Hello!"
+          \>
+            <IressButton\>
+              Left            </IressButton\>
+          </IressTooltip\>
+        </IressInline\>
+        <IressInline horizontalAlign\="left"\>
+          <IressTooltip
+            align\="left-end"
+            tooltipText\="Hello!"
+          \>
+            <IressButton\>
+              Left End            </IressButton\>
+          </IressTooltip\>
+        </IressInline\>
+      </IressStack\>
+      <IressStack gap\="sm"\>
+        <IressInline horizontalAlign\="right"\>
+          <IressTooltip
+            align\="right-start"
+            tooltipText\="Hello!"
+          \>
+            <IressButton\>
+              Right Start            </IressButton\>
+          </IressTooltip\>
+        </IressInline\>
+        <IressInline horizontalAlign\="right"\>
+          <IressTooltip
+            align\="right"
+            tooltipText\="Hello!"
+          \>
+            <IressButton\>
+              Right            </IressButton\>
+          </IressTooltip\>
+        </IressInline\>
+        <IressInline horizontalAlign\="right"\>
+          <IressTooltip
+            align\="right-end"
+            tooltipText\="Hello!"
+          \>
+            <IressButton\>
+              Right End            </IressButton\>
+          </IressTooltip\>
+        </IressInline\>
+      </IressStack\>
+    </IressInline\>
+    <IressInline
+      gap\="sm"
+      horizontalAlign\="center"
+    \>
+      <IressTooltip
+        align\="bottom-start"
+        tooltipText\="Hello!"
+      \>
+        <IressButton\>
+          Bottom Start        </IressButton\>
+      </IressTooltip\>
+      <IressTooltip
+        align\="bottom"
+        tooltipText\="Hello!"
+      \>
+        <IressButton\>
+          Bottom        </IressButton\>
+      </IressTooltip\>
+      <IressTooltip
+        align\="bottom-end"
+        tooltipText\="Hello!"
+      \>
+        <IressButton\>
+          Bottom End        </IressButton\>
+      </IressTooltip\>
+    </IressInline\>
+  </IressStack\>
+</div\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| align | 
+Sets the alignment of the popover relative to the activator element.
+
+FloatingUIAligns
+
+
+
+ | 
+
+'top'
+
+ | \- |
+| children\* | 
+
+The element to add a tooltip to.
+
+ReactNode
+
+
+
+ | \- | \- |
+| delay | 
+
+Sets the tooltip display delay in milliseconds.
+
+number
+
+
+
+ | 
+
+500
+
+ | Set number |
+| open | 
+
+Only used for internal testing.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | \- |
+| tooltipText\* | 
+
+Sets the tooltip text. Can accept a string or an array of strings - if given an array, will output each string on a new line.
+
+union
+
+
+
+ | \- | 
+
+"Hello!"
+
+ |
+
+### Delay
+
+The `delay` prop requires a number that is the number of milliseconds that pass after the activator has received a `mouseEnter` event and the display of the tooltip.
+
+[](./iframe.html?id=components-tooltip--delay)
+
+0ms (no delay)
+
+500ms (default)
+
+2000ms
+
+```
+
+<div
+  style\={{
+    paddingTop: '30px'
+  }}
+\>
+  <IressInline
+    gap\="sm"
+    horizontalAlign\="center"
+  \>
+    <IressTooltip
+      delay\={0}
+      tooltipText\="Hello!"
+    \>
+      <IressButton\>
+        0ms (no delay)      </IressButton\>
+    </IressTooltip\>
+    <IressTooltip tooltipText\="Hello!"\>
+      <IressButton\>
+        500ms (default)      </IressButton\>
+    </IressTooltip\>
+    <IressTooltip
+      delay\={2000}
+      tooltipText\="Hello!"
+    \>
+      <IressButton\>
+        2000ms      </IressButton\>
+    </IressTooltip\>
+  </IressInline\>
+</div\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| align | 
+Sets the alignment of the popover relative to the activator element.
+
+FloatingUIAligns
+
+
+
+ | 
+
+'top'
+
+ | Set object |
+| children\* | 
+
+The element to add a tooltip to.
+
+ReactNode
+
+
+
+ | \- | \- |
+| delay | 
+
+Sets the tooltip display delay in milliseconds.
+
+number
+
+
+
+ | 
+
+500
+
+ | Set number |
+| open | 
+
+Only used for internal testing.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | \- |
+| tooltipText\* | 
+
+Sets the tooltip text. Can accept a string or an array of strings - if given an array, will output each string on a new line.
+
+union
+
+
+
+ | \- | 
+
+"Hello!"
+
+ |
+
+### The title attribute
+
+The component will not make any provision for existing title HTML attributes. If one exists, it will be activated along with the tooltip, potentially overlaying it making it difficult to ascertain the information being imparted. The title could also contain different content to the tooltip increasing the chance of confusing the end user.
+
+We suggest removing the title attribute on elements that will use tooltip.