@iress-oss/ids-mcp-server 5.15.0 → 5.20.2

package/generated/docs/{components-tooltip-docs.md → components_components-tooltip-docs.md}

@@ -1,26 +1,92 @@
-[](#tooltip)Tooltip
-===================
+Tooltip
+=======
 
 Overview
 --------
 
 A component that shows concise, informative text about an element when focussed upon, hovered over or on a long touch.
 
-Hover me
+[](./iframe.html?id=components-tooltip--default)
 
-Hide code
+Hover me
 
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
+Hide codedrawOpen in CodeSandbox
 
 <IressTooltip tooltipText\="Hello! This is a really long tooltip to try and see if it goes behind the scrollbar"\>
   <IressButton\>
     Hover me  </IressButton\>
 </IressTooltip\>
 
-Copy
+```
+
+Props
+-----
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| align | 
+Sets the alignment of the popover relative to the activator element.
+
+union
+
+
+
+ | 
+
+'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)Usage
----------------
+Usage
+-----
 
 The content that will be displayed in the tooltip is passed using the `tooltipText` prop.
 
@@ -28,13 +94,13 @@ This content can only be plain text; there is no parsing of any markup or stylin
 
 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
 
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
+Hide codedrawOpen in CodeSandbox
 
 <div
   style\={{
@@ -58,10 +124,71 @@ Hide code
   </IressInline\>
 </div\>
 
-Copy
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| align | 
+Sets the alignment of the popover relative to the activator element.
+
+union
+
+
+
+ | 
+
+'top'
+
+ | Set object |
+| children\* | 
+
+The element to add a tooltip to.
+
+ReactNode
+
+
+
+ | \- | \- |
+| delay | 
+
+Sets the tooltip display delay in milliseconds.
+
+number
+
 
-[](#behaviour)Behaviour
------------------------
+
+ | 
+
+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:
 
@@ -71,8 +198,8 @@ The behaviour of tooltips varies according to how they're shown:
 
 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)Accessibility
--------------------------------
+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).
 
@@ -86,15 +213,17 @@ Other things to keep in mind:
 *   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)Examples
----------------------
+Examples
+--------
 
-### [](#align)Align
+### 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
@@ -119,9 +248,7 @@ Bottom
 
 Bottom End
 
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
+Hide codedrawOpen in CodeSandbox
 
 <div
   style\={{
@@ -244,21 +371,86 @@ Hide code
   </IressStack\>
 </div\>
 
-Copy
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| align | 
+Sets the alignment of the popover relative to the activator element.
+
+union
+
+
+
+ | 
+
+'top'
+
+ | \- |
+| children\* | 
+
+The element to add a tooltip to.
+
+ReactNode
+
+
+
+ | \- | \- |
+| delay | 
+
+Sets the tooltip display delay in milliseconds.
+
+number
+
+
 
-### [](#delay)Delay
+ | 
+
+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
 
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
+Hide codedrawOpen in CodeSandbox
 
 <div
   style\={{
@@ -290,22 +482,75 @@ Hide code
   </IressInline\>
 </div\>
 
-Copy
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| align | 
+Sets the alignment of the popover relative to the activator element.
+
+union
+
+
+
+ | 
+
+'top'
+
+ | Set object |
+| children\* | 
+
+The element to add a tooltip to.
+
+ReactNode
+
+
+
+ | \- | \- |
+| delay | 
+
+Sets the tooltip display delay in milliseconds.
+
+number
+
+
 
-### [](#the-title-attribute)The title attribute
+ | 
+
+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.
-
-On this page
-
-*   [Overview](#overview)
-*   [Props](#props)
-*   [Usage](#usage)
-*   [Behaviour](#behaviour)
-*   [Accessibility](#accessibility)
-*   [Examples](#examples)
-    *   [Align](#align)
-    *   [Delay](#delay)
-    *   [The title attribute](#the-title-attribute)