_activeComponentId = 'demoTooltipManager';

TooltipManager

Manages one or more tooltips and attaches them to any trigger element on the page, shown on focus, blur or a configurable pointer event and positioned using a Box.

Usage

<div id="demoBox" ui-type="Box" ui-action="none"
     ui-expand-direction="1" ui-auto-position="11" ui-align-y="1"></div>

<div id="demoTooltipManager" ui-type="TooltipManager"
     ui-box-id="demoBox"
     ui-selectable-tooltip-content="true"
     ui-show-on-focus="true"
     ui-show-on-blur="false"
     ui-arrowless="false"
     ui-show-on-pointer-event="1"
     ui-triggers='[{"triggerId":"trigger","tooltipId":"tooltip"}]'>
    <div ui-template="tooltip">
        <b>Tooltip content</b><br />
        can include any HTML, not just plain text.
    </div>
</div>

<a id="button" ui-type="Button" ui-text="Display tooltip"
   ui-tooltip-manager-id="demoTooltipManager" ui-tooltip-id="tooltip"></a>

<div style="margin-top: 10px">
    The button above uses its own <code>tooltipManagerId</code>/<code>tooltipId</code> 
    properties. This plain <a href="javascript: void(0)" id="trigger">link</a> 
    shows the same tooltip a different way, 
    by being registered as a trigger on the TooltipManager itself, 
    so any element can show a tooltip, not just ones with built-in tooltip support.
</div>

const box = $UI.createComponent(componyx.UI.Box, {
    id: 'demoBox',
    expandDirection: componyx.UI.Box.ExpandDirectionOption.RIGHT,
    autoPosition: componyx.UI.Box.AutoPositionOption.EXPAND,
    alignY: componyx.UI.Box.AlignYOption.CENTER
});

const tooltipManager = $UI.createComponent(componyx.UI.TooltipManager, {
    id: 'demoTooltipManager',
    boxId: 'demoBox',
    selectableTooltipContent: true,
    showOnFocus: true,
    showOnBlur: false,
    arrowless: false,
    showOnPointerEvent: componyx.UI.TooltipManager.ShowOnPointerEventOption.ENTER,
    containerElement: document.body
});
tooltipManager.addTooltip('tooltip', '<b>Tooltip content</b><br /> can include any HTML, not just plain text.');
tooltipManager.addTrigger('trigger', 'tooltip');
tooltipManager.show();

const button = $UI.createComponent(componyx.UI.Button, {
    id: 'button',
    text: 'Display tooltip',
    tooltipManagerId: 'demoTooltipManager',
    tooltipId: 'tooltip',
    containerElement: document.body
});
button.show();

const div = document.body.appendChild(document.createElement('div'));
div.style = 'margin-top: 10px';
div.innerHTML = 'The button above uses its own <code>tooltipManagerId</code>/<code>tooltipId</code> properties. ' +
    'This plain <a href="javascript: void(0)" id="trigger">link</a> shows the same tooltip a different way, ' +
    'by being registered as a trigger on the TooltipManager itself, so any element can show a tooltip, not ' +
    'just ones with built-in tooltip support.';

expandDirection accepts the numeric componyx.UI.Box.ExpandDirectionOption enum: 0 Down, 1 Right, 2 Up, 3 Left. Changing it after the Box has already rendered doesn't reposition it on its own, the layout is established at render time, so the settings panel above re-renders the Box (and then re-registers it with TooltipManager) whenever the setting changes.