Tooltip

In Pokémon Studio, Tooltip shows thanks to the Popover API.

There's 4 kind of tooltips:

1. Automatic tooltip (when text-overflow is set to ellipsis and text overflows)
2. Fixed tooltip (when data-tooltip field contains the text to show)
3. Fancy tooltip (when data-tooltip-id field points to an element ID that exists in the DOM).
4. Responsive tooltip (when data-tooltip-responsive is set to expected innerText of the element, shows when innerText no longer match)

Tooltip will show when mouse enter the component requiring tooltip and hide when leaving or clicking. If for any reason you need to disable tooltip on a component, set data-tooltip-hidden on this component.

If you need to change the text of a currently shown tooltip (eg. clicking on a copy button), set the data-tooltip-remain-on-click attribute on the button and send the custom event tooltip:ChangeText with new text as details to the window!

Note

Sometimes components are designed to not listen to pointer events (disabled buttons / data blocks). You can use the <TooltipWrapper> component to solve this issue. This component will host the data-tooltip things.

Example from the code

      <div style={{ display: 'flex', justifyContent: 'space-between' }}>
        {/* @ts-ignore */}
        <span style={{ textOverflow: 'ellipsis', overflow: 'hidden', 'text-wrap': 'nowrap', maxWidth: '60px' }}>Tooltip showing truncated text.</span>
        <span data-tooltip="Hidden detail text!">Tooltip showing details</span>
        <span data-tooltip-id="hiddenToolTip">Fancy tooltip</span>
      </div>
      <div id="hiddenToolTip" style={{ display: 'none' }}>
        <span>Some nicer </span>
        <span style={{ color: 'green' }}>ToolTip</span>
        <span> !</span>
      </div>

The last visible span will actually show the content of #hiddenToolTip div inside the tooltip.