Tooltip

Show Code
<button class="button" ref="tooltipTarget" @click="active = !active">
    Hover Over
</button>

<ks-tooltip target="tooltipTarget">
    <div>Another tooltip right here</div>
    <h2>Title tag</h2>
    <button class="button">iButton</button>
</ks-tooltip>

<button class="button" v-ks-tooltip="'Tooltip text, add more text'" :props="{trigger: 'click'}">
    Directive
</button>

Show Code
<button class="button">
    Hover Over (Delayed)
    <ks-tooltip :hover-delay="500">
        <div>Another tooltip right here (delayed)</div>
        <h2>Title tag</h2>
        <button class="button">iButton</button>
    </ks-tooltip>
</button>

Example using a slot

Show Code
<ks-button>
    Tooltip (click)
    <ks-tooltip trigger="click">
        <p>
            A tooltip triggered on click
        </p>
    </ks-tooltip>
</ks-button>

Props
Methods

Name	Type	Default	Description
isActive	Boolean	true	Whether the tooltip is active or not. When false tooltip will not trigger
trigger	String	hover	The trigger for showing the tooltip. hover, click
width	String		The width of the tooltip window. (auto by default)
height	String		The height of the tooltip window. (auto by default)
target	String	The target ref name from the tooltips parent component. if left blank it will assume the parent is the target
hideDelay	Number	150	Delay in ms for hiding the tooltip
hoverDelay	Number		When set, Delay in ms for showing the tooltip.