@rio-cloud/uikit-mcp 1.0.0 → 1.1.0

package/dist/docs/components/tooltip.md

@@ -0,0 +1,454 @@
+# Tooltips
+
+*Category:* Components
+*Section:* Misc
+*Source:* https://uikit.developers.rio.cloud/#components/tooltip
+*Captured:* 2025-12-12T12:39:03.341Z
+
+In order to use a Tooltip on an element, wrap it with the OverlayTrigger component or use the SimpleTooltip component.
+
+## Tooltips
+
+> Note: By default Tooltips are not rendered on touch devices. This might lead to issues for test environments where the check for mobile evaluate to true simply because the required class name is not set on the document element.To fix that, simply set the class in your test as follows:document.documentElement.classList.add('ua-desktop');
+
+### Example: Example 1
+
+HoverHoverHover
+HoverHover
+HoverHoverHover
+
+ClickClickClick
+ClickClick
+ClickClickClick
+
+#### Summary
+
+HoverHoverHover
+HoverHover
+HoverHoverHover
+
+ClickClickClick
+ClickClick
+ClickClickClick
+
+#### React (tsx)
+
+```tsx
+import Button from '@rio-cloud/rio-uikit/Button';
+import Tooltip from '@rio-cloud/rio-uikit/Tooltip';
+import OverlayTrigger from '@rio-cloud/rio-uikit/OverlayTrigger';
+import type { Placement } from '@rio-cloud/rio-uikit/values/Placement';
+
+import { getNames } from '../../../utils/mapUtils';
+
+const tip = <span>Tooltip</span>;
+
+const tooltipPlacements = {
+    top: [
+        {
+            name: 'top-start',
+        },
+        {
+            name: 'top',
+        },
+        {
+            name: 'top-end',
+        },
+    ],
+    middle: [
+        {
+            name: 'left',
+        },
+        {
+            name: 'right',
+        },
+    ],
+    bottom: [
+        {
+            name: 'bottom-start',
+        },
+        {
+            name: 'bottom',
+        },
+        {
+            name: 'bottom-end',
+        },
+    ],
+};
+
+const eachPlacementTop = getNames(tooltipPlacements.top);
+const eachPlacementMiddle = getNames(tooltipPlacements.middle);
+const eachPlacementBottom = getNames(tooltipPlacements.bottom);
+
+export default () => (
+    <>
+        <div className='display-grid grid-cols-1 grid-cols-2-sm gap-20'>
+            <div className='padding-15'>
+                <div className='display-flex justify-content-between gap-10 center-block height-50'>
+                    {eachPlacementTop.map((placement: Placement) => (
+                        <OverlayTrigger
+                            key={crypto.randomUUID()}
+                            placement={placement}
+                            overlay={
+                                <Tooltip id='tooltip' allowOnTouch>
+                                    {tip}
+                                </Tooltip>
+                            }
+                        >
+                            <Button bsStyle='primary'>Hover</Button>
+                        </OverlayTrigger>
+                    ))}
+                </div>
+                <div className='display-flex justify-content-between gap-10 center-block height-50'>
+                    {eachPlacementMiddle.map((placement: Placement) => (
+                        <OverlayTrigger
+                            key={crypto.randomUUID()}
+                            placement={placement}
+                            overlay={
+                                <Tooltip id='tooltip' allowOnTouch>
+                                    {tip}
+                                </Tooltip>
+                            }
+                        >
+                            <Button bsStyle='primary'>Hover</Button>
+                        </OverlayTrigger>
+                    ))}
+                </div>
+                <div className='display-flex justify-content-between gap-10 center-block height-50'>
+                    {eachPlacementBottom.map((placement: Placement) => (
+                        <OverlayTrigger
+                            key={crypto.randomUUID()}
+                            placement={placement}
+                            overlay={
+                                <Tooltip id='tooltip' allowOnTouch>
+                                    {tip}
+                                </Tooltip>
+                            }
+                        >
+                            <Button bsStyle='primary'>Hover</Button>
+                        </OverlayTrigger>
+                    ))}
+                </div>
+            </div>
+            <div className='padding-15'>
+                <div className='display-flex justify-content-between gap-10 center-block height-50'>
+                    {eachPlacementTop.map((placement: Placement) => (
+                        <OverlayTrigger
+                            key={crypto.randomUUID()}
+                            placement={placement}
+                            trigger='click'
+                            overlay={
+                                <Tooltip id='tooltip' allowOnTouch>
+                                    {tip}
+                                </Tooltip>
+                            }
+                        >
+                            <Button bsStyle='primary'>Click</Button>
+                        </OverlayTrigger>
+                    ))}
+                </div>
+                <div className='display-flex justify-content-between gap-10 center-block height-50'>
+                    {eachPlacementMiddle.map((placement: Placement) => (
+                        <OverlayTrigger
+                            key={crypto.randomUUID()}
+                            placement={placement}
+                            trigger='click'
+                            overlay={
+                                <Tooltip id='tooltip' allowOnTouch>
+                                    {tip}
+                                </Tooltip>
+                            }
+                        >
+                            <Button bsStyle='primary'>Click</Button>
+                        </OverlayTrigger>
+                    ))}
+                </div>
+                <div className='display-flex justify-content-between gap-10 center-block height-50'>
+                    {eachPlacementBottom.map((placement: Placement) => (
+                        <OverlayTrigger
+                            key={crypto.randomUUID()}
+                            placement={placement}
+                            trigger='click'
+                            overlay={
+                                <Tooltip id='tooltip' allowOnTouch>
+                                    {tip}
+                                </Tooltip>
+                            }
+                        >
+                            <Button bsStyle='primary'>Click</Button>
+                        </OverlayTrigger>
+                    ))}
+                </div>
+            </div>
+        </div>
+        <hr />
+        <div className='display-grid grid-cols-2'>
+            <div className='display-flex justify-content-between gap-10 center-block'>
+                {eachPlacementTop.map((placement: Placement) => (
+                    <OverlayTrigger
+                        key={crypto.randomUUID()}
+                        placement={placement}
+                        delay={200}
+                        overlay={
+                            <Tooltip id='tooltip' allowOnTouch>
+                                {tip}
+                            </Tooltip>
+                        }
+                    >
+                        <div
+                            className='display-flex align-items-center justify-content-center'
+                            data-test='info-overlay'
+                        >
+                            <span className='rioglyph rioglyph-info-sign text-color-info text-size-18' />
+                        </div>
+                    </OverlayTrigger>
+                ))}
+            </div>
+            <div className='display-flex justify-content-between gap-10 center-block'>
+                {eachPlacementBottom.map((placement: Placement) => (
+                    <OverlayTrigger
+                        key={crypto.randomUUID()}
+                        placement={placement}
+                        delay={{ show: 1000, hide: 500 }}
+                        overlay={
+                            <Tooltip id='tooltip' allowOnTouch>
+                                {tip}
+                            </Tooltip>
+                        }
+                    >
+                        <div
+                            className='display-flex align-items-center justify-content-center'
+                            data-test='info-overlay'
+                        >
+                            <span className='rioglyph rioglyph-info-sign text-color-info text-size-18' />
+                        </div>
+                    </OverlayTrigger>
+                ))}
+            </div>
+        </div>
+    </>
+);
+```
+
+#### HTML (html)
+
+```html
+<div class="display-grid grid-cols-1 grid-cols-2-sm gap-20">
+    <div class="padding-15">
+        <div class="display-flex justify-content-between gap-10 center-block height-50">
+            <button type="button" class="btn btn-primary btn-component" tabindex="0">Hover</button>
+            <button type="button" class="btn btn-primary btn-component" tabindex="0">Hover</button>
+            <button type="button" class="btn btn-primary btn-component" tabindex="0">Hover</button>
+        </div>
+        <div class="display-flex justify-content-between gap-10 center-block height-50">
+            <button type="button" class="btn btn-primary btn-component" tabindex="0">Hover</button>
+            <button type="button" class="btn btn-primary btn-component" tabindex="0">Hover</button>
+        </div>
+        <div class="display-flex justify-content-between gap-10 center-block height-50">
+            <button type="button" class="btn btn-primary btn-component" tabindex="0">Hover</button>
+            <button type="button" class="btn btn-primary btn-component" tabindex="0">Hover</button>
+            <button type="button" class="btn btn-primary btn-component" tabindex="0">Hover</button>
+        </div>
+    </div>
+    <div class="padding-15">
+        <div class="display-flex justify-content-between gap-10 center-block height-50">
+            <button type="button" class="btn btn-primary btn-component" tabindex="0">Click</button>
+            <button type="button" class="btn btn-primary btn-component" tabindex="0">Click</button>
+            <button type="button" class="btn btn-primary btn-component" tabindex="0">Click</button>
+        </div>
+        <div class="display-flex justify-content-between gap-10 center-block height-50">
+            <button type="button" class="btn btn-primary btn-component" tabindex="0">Click</button>
+            <button type="button" class="btn btn-primary btn-component" tabindex="0">Click</button>
+        </div>
+        <div class="display-flex justify-content-between gap-10 center-block height-50">
+            <button type="button" class="btn btn-primary btn-component" tabindex="0">Click</button>
+            <button type="button" class="btn btn-primary btn-component" tabindex="0">Click</button>
+            <button type="button" class="btn btn-primary btn-component" tabindex="0">Click</button>
+        </div>
+    </div>
+</div>
+<hr>
+<div class="display-grid grid-cols-2">
+    <div class="display-flex justify-content-between gap-10 center-block">
+        <div class="display-flex align-items-center justify-content-center" data-test="info-overlay">
+            <span class="rioglyph rioglyph-info-sign text-color-info text-size-18">
+            </span>
+        </div>
+        <div class="display-flex align-items-center justify-content-center" data-test="info-overlay">
+            <span class="rioglyph rioglyph-info-sign text-color-info text-size-18">
+            </span>
+        </div>
+        <div class="display-flex align-items-center justify-content-center" data-test="info-overlay">
+            <span class="rioglyph rioglyph-info-sign text-color-info text-size-18">
+            </span>
+        </div>
+    </div>
+    <div class="display-flex justify-content-between gap-10 center-block">
+        <div class="display-flex align-items-center justify-content-center" data-test="info-overlay">
+            <span class="rioglyph rioglyph-info-sign text-color-info text-size-18">
+            </span>
+        </div>
+        <div class="display-flex align-items-center justify-content-center" data-test="info-overlay">
+            <span class="rioglyph rioglyph-info-sign text-color-info text-size-18">
+            </span>
+        </div>
+        <div class="display-flex align-items-center justify-content-center" data-test="info-overlay">
+            <span class="rioglyph rioglyph-info-sign text-color-info text-size-18">
+            </span>
+        </div>
+    </div>
+</div>
+```
+
+#### Props: Tooltip
+
+### Tooltip
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| id | String / Number | — | An HTML id attribute, necessary for accessibility. |
+| placement | String | — | Sets the direction the Tooltip is positioned towards. This is generally provided by the OverlayTrigger component positioning the tooltip. Possible values are: auto-start, auto, auto-end, top-start, top, top-end, bottom-start, bottom, bottom-end, right-start, right, right-end, left-start, left or left-end |
+| tooltipStyle | String | default | Defines the look of the tooltip. Possible values are: default, onboarding |
+| textAlignment | String | center | Defines the position of the text content. Possible values are: left, right, center |
+| width | String | — | Defines the width of the tooltip. Possible values are: auto, 100, 150, 200, 250, 300, 350, 400, 450, 500 |
+| allowOnTouch | bool | false | Render Tooltips on mobile devices. |
+| className | String | — | Additional classes to be set on the wrapper element. |
+| innerClassName | String | — | Additional classes to be set on the inner element. |
+| children | any | — | Any element to be rendered inside the tooltip. |
+
+#### Props: OverlayTrigger
+
+### OverlayTrigger
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| trigger | 'click' \| 'hover' \| 'focus' | hover | Specify which action or actions trigger Overlay visibility. Possible values are: OverlayTrigger.TRIGGER_CLICK , OverlayTrigger.TRIGGER_HOVER, OverlayTrigger.TRIGGER_HOVER or 'click', 'hover', 'focus' |
+| delay | Number / Object | — | A millisecond delay amount to show and hide the Overlay once triggered. |
+| └show | Number | — | A millisecond delay amount before showing the Overlay once triggered. |
+| └hide | Number | — | A millisecond delay amount before hiding the Overlay once triggered. |
+| defaultShow | Boolean | — | The initial visibility state of the Overlay. For more nuanced visibility control, consider using the Overlay component directly. |
+| overlay | Node | — | An element or text to overlay next to the target. |
+| placement | String | — | Sets the direction the overlay is positioned towards. Possible values are: auto-start, auto, auto-end, top-start, top, top-end, bottom-start, bottom, bottom-end, right-start, right, right-end, left-start, left or left-end |
+| popperConfig | Object | — | A Popper.js config object passed to the the underlying popper instance. |
+
+## SimpleTooltip
+
+### Example: Example 2
+
+Simple tooltip with auto placement:Hover me
+Simple tooltip with bottom placement:Hover me
+
+Hover me
+
+Simple tooltip within text:Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum etmalesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.
+
+#### Summary
+
+Simple tooltip with auto placement:Hover me
+Simple tooltip with bottom placement:Hover me
+
+Hover me
+
+Simple tooltip within text:Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum etmalesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.
+
+#### React (tsx)
+
+```tsx
+import SimpleTooltip from '@rio-cloud/rio-uikit/SimpleTooltip';
+import Button from '@rio-cloud/rio-uikit/Button';
+import Tag from '@rio-cloud/rio-uikit/Tag';
+import Switch from '@rio-cloud/rio-uikit/Switch';
+
+const content = <span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</span>;
+
+export default () => (
+    <div>
+        <label>Simple tooltip with auto placement:</label>
+        <div className='margin-bottom-25 display-flex gap-25'>
+            <SimpleTooltip content={content}>
+                <Button>Hover me</Button>
+            </SimpleTooltip>
+        </div>
+        <label>Simple tooltip with bottom placement:</label>
+        <div className='margin-bottom-25 display-flex gap-25'>
+            <SimpleTooltip content={content} placement='bottom'>
+                <Tag>Hover me</Tag>
+            </SimpleTooltip>
+            <SimpleTooltip content={content} placement='bottom'>
+                <Switch>Hover me</Switch>
+            </SimpleTooltip>
+        </div>
+        <label>Simple tooltip within text:</label>
+        <div>
+            Lorem ipsum dolor sit amet,{' '}
+            <SimpleTooltip content={content} placement='top'>
+                <a href='#'>consectetur adipiscing</a>
+            </SimpleTooltip>{' '}
+            elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc
+            efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque
+            tincidunt.{' '}
+            <SimpleTooltip content={content} placement='top'>
+                <a href='#'>Fusce ac ligula bibendum</a>
+            </SimpleTooltip>
+            , rutrum libero quis, viverra sem. Interdum etmalesuada fames ac ante ipsum primis in faucibus. Duis ut
+            hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci,
+            semper finibus lorem in, fringilla pretium velit.
+        </div>
+        <hr />
+        <SimpleTooltip placement='bottom-start' content={<span>Hello</span>} width={100}>
+            <span className='rioglyph rioglyph-info-sign text-color-info text-size-18' />
+        </SimpleTooltip>
+    </div>
+);
+```
+
+#### HTML (html)
+
+```html
+<div>
+    <label>Simple tooltip with auto placement:</label>
+    <div class="margin-bottom-25 display-flex gap-25">
+        <button type="button" class="btn btn-default btn-component" tabindex="0">Hover me</button>
+    </div>
+    <label>Simple tooltip with bottom placement:</label>
+    <div class="margin-bottom-25 display-flex gap-25">
+        <div class="tag">
+            <div class="tag-inner">Hover me</div>
+        </div>
+        <div class="uikit-switch">
+            <label class="switch-label label-position-right">
+                <input type="checkbox" class="switch-input">
+                <div class="switch-content" style="color: var(--brand-primary); min-width: 40px;">
+                    <div class="switch-handle">
+                    </div>
+                </div>Hover me
+            </label>
+        </div>
+    </div>
+    <label>Simple tooltip within text:</label>
+    <div>Lorem ipsum dolor sit amet, <a href="#">consectetur adipiscing</a> elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. <a href="#">Fusce ac ligula bibendum</a>, rutrum libero quis, viverra sem. Interdum etmalesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.</div>
+    <hr>
+    <span class="rioglyph rioglyph-info-sign text-color-info text-size-18">
+    </span>
+</div>
+```
+
+#### Props: SimpleTooltip
+
+### SimpleTooltip
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| trigger | String | hover | Specify which action or actions trigger Overlay visibility. Possible values are: 'click', 'hover', 'focus' |
+| placement | String | AUTO | Sets the direction the Tooltip is positioned towards. This is generally provided by the OverlayTrigger component positioning the tooltip. Possible values are: auto-start, auto, auto-end, top-start, top, top-end, bottom-start, bottom, bottom-end, right-start, right, right-end, left-start, left or left-end |
+| content | String / Node | — | The tooltip content. |
+| targetRef | Ref | — | The react ref object assigned to the target of the tooltip. |
+| delay | Number / Object | — | A millisecond delay amount to show the Overlay once triggered. |
+| └show | Number | — | A millisecond delay amount before showing the Overlay once triggered. |
+| └hide | Number | — | A millisecond delay amount before hiding the Overlay once triggered. |
+| textAlignment | String | center | Defines the position of the text content. Possible values are: left, right, center |
+| width | String | — | Defines the width of the tooltip. Possible values are: auto, 100, 150, 200, 250, 300, 350, 400, 450, 500 |
+| className | String | — | Additional classes to be set on the wrapper element. |
+| innerClassName | String | — | Additional classes to be set on the inner element. |
+| popperConfig | Object | — | A Popper.js config object passed to the the underlying popper instance. |
+| children | Node | — | The target node. |