Tooltip
<gstock-tooltip>
|
GstockTooltip
Colors
<gstock-tooltip color="primary" content="This is a primary tooltip">
<gstock-button color="primary" size="small" variant="outlined">Primary</gstock-button>
</gstock-tooltip>
<gstock-tooltip color="secondary" content="This is a secondary tooltip">
<gstock-button color="secondary" size="small" variant="outlined">Secondary</gstock-button>
</gstock-tooltip>
<gstock-tooltip color="information" content="This is a information tooltip">
<gstock-button color="information" size="small" variant="outlined">Information</gstock-button>
</gstock-tooltip>
Placement
Use the placement attribute to set the preferred placement of the
tooltip.
<div class="tooltip-placement-example">
<div class="tooltip-placement-example-row">
<gstock-tooltip content="top-start" placement="top-start">
<gstock-button size="small" variant="outlined"></gstock-button>
</gstock-tooltip>
<gstock-tooltip content="top" placement="top">
<gstock-button size="small" variant="outlined"></gstock-button>
</gstock-tooltip>
<gstock-tooltip content="top-end" placement="top-end">
<gstock-button size="small" variant="outlined"></gstock-button>
</gstock-tooltip>
</div>
<div class="tooltip-placement-example-row">
<gstock-tooltip content="left-start" placement="left-start">
<gstock-button size="small" variant="outlined"></gstock-button>
</gstock-tooltip>
<gstock-tooltip content="right-start" placement="right-start">
<gstock-button size="small" variant="outlined"></gstock-button>
</gstock-tooltip>
</div>
<div class="tooltip-placement-example-row">
<gstock-tooltip content="left" placement="left">
<gstock-button size="small" variant="outlined"></gstock-button>
</gstock-tooltip>
<gstock-tooltip content="right" placement="right">
<gstock-button size="small" variant="outlined"></gstock-button>
</gstock-tooltip>
</div>
<div class="tooltip-placement-example-row">
<gstock-tooltip content="left-end" placement="left-end">
<gstock-button size="small" variant="outlined"></gstock-button>
</gstock-tooltip>
<gstock-tooltip content="right-end" placement="right-end">
<gstock-button size="small" variant="outlined"></gstock-button>
</gstock-tooltip>
</div>
<div class="tooltip-placement-example-row">
<gstock-tooltip content="bottom-start" placement="bottom-start">
<gstock-button size="small" variant="outlined"></gstock-button>
</gstock-tooltip>
<gstock-tooltip content="bottom" placement="bottom">
<gstock-button size="small" variant="outlined"></gstock-button>
</gstock-tooltip>
<gstock-tooltip content="bottom-end" placement="bottom-end">
<gstock-button size="small" variant="outlined"></gstock-button>
</gstock-tooltip>
</div>
</div>
<style>
.tooltip-placement-example {
width: 250px;
margin: 1rem;
}
.tooltip-placement-example-row:after {
content: '';
display: table;
clear: both;
}
.tooltip-placement-example gstock-button {
float: left;
width: 2.5rem;
margin-right: 0.25rem;
margin-bottom: 0.25rem;
}
.tooltip-placement-example-row:nth-child(1) gstock-tooltip:first-child gstock-button,
.tooltip-placement-example-row:nth-child(5) gstock-tooltip:first-child gstock-button {
margin-left: calc(40px + 0.25rem);
}
.tooltip-placement-example-row:nth-child(2) gstock-tooltip:nth-child(2) gstock-button,
.tooltip-placement-example-row:nth-child(3) gstock-tooltip:nth-child(2) gstock-button,
.tooltip-placement-example-row:nth-child(4) gstock-tooltip:nth-child(2) gstock-button {
margin-left: calc((40px * 3) + (0.25rem * 3));
}
</style>
Click Trigger
Set the trigger attribute to click to toggle the tooltip
on click instead of hover.
<gstock-tooltip content="Click again to dismiss" trigger="click">
<gstock-button size="small" variant="outlined">Click to Toggle</gstock-button>
</gstock-tooltip>
Manual Trigger
Tooltips can be controlled programmatically by setting the
trigger attribute to manual. Use the
open attribute to control when the tooltip is shown.
<gstock-button size="small" variant="outlined">Toggle Manually</gstock-button>
<gstock-tooltip content="This is an avatar" trigger="manual" class="manual-tooltip">
<gstock-avatar label="User"></gstock-avatar>
</gstock-tooltip>
<script type="module">
const tooltip = document.querySelector('.manual-tooltip');
const toggle = tooltip.previousElementSibling;
toggle.addEventListener('click', () => (tooltip.open = !tooltip.open));
</script>
Removing Arrows
You can control the size of tooltip arrows by overriding the
--gstock-tooltip-arrow-size design token. To remove them, set the value
to 0 as shown below.
<gstock-tooltip content="This is a tooltip" style="--tooltip-arrow-size: 0;">
<gstock-button size="small" variant="outlined">No Arrow</gstock-button>
</gstock-tooltip>
To override it globally, set it in a root block in your stylesheet after the Gstock Web Components stylesheet is loaded.
:root {
--tooltip-arrow-size: 0;
}
HTML in Tooltips
Use the content slot to create tooltips with HTML content. Tooltips are
designed only for text and presentational elements. Avoid placing interactive
content, such as buttons, links, and form controls, in a tooltip.
<gstock-tooltip>
<div slot="content">
I'm not <strong>just</strong> a tooltip, I'm a <em>tooltip</em> with HTML!
</div>
<gstock-button size="small" variant="outlined">Hover me</gstock-button>
</gstock-tooltip>
Maximum width
Use the --max-width custom property to change the width the tooltip can
grow to before wrapping occurs.
<gstock-tooltip style="--max-width: 80px" content="This tooltip will wrap after only 80 pixels.">
<gstock-button size="small" variant="outlined">Hover me</gstock-button>
</gstock-tooltip>
Hoisting
Tooltips will be clipped if they’re inside a container that has
overflow: auto|hidden|scroll. The hoist attribute forces
the tooltip to use a fixed positioning strategy, allowing it to break out of the
container. In this case, the tooltip will be positioned relative to its
containing block, which is usually the viewport unless an ancestor uses a transform,
perspective, or filter.
Refer to this page
for more details.
<div class="tooltip-hoist">
<gstock-tooltip content="This is a tooltip">
<gstock-button size="small" variant="outlined">No Hoist</gstock-button>
</gstock-tooltip>
<gstock-tooltip content="This is a tooltip" hoist>
<gstock-button size="small" variant="outlined">Hoist</gstock-button>
</gstock-tooltip>
</div>
<style>
.tooltip-hoist {
position: relative;
border: solid 2px var(--gstock-legacy-color-grayscale-200);
overflow: hidden;
padding: var(--gstock-legacy-spacing-7);
}
</style>