Tooltip

<gstock-tooltip> | GstockTooltip

Examples

Hover Me

<gstock-tooltip content="This is a tooltip">
  <gstock-button>Hover Me</gstock-button>
</gstock-tooltip>

Color

Utilice el atributo color para establecer el color del tooltip.

Primary

Secondary

Information

<gstock-tooltip color="primary" content="This is a primary tooltip">
  <gstock-button variant="outlined">Primary</gstock-button>
</gstock-tooltip>

<gstock-tooltip color="secondary" content="This is a secondary tooltip">
  <gstock-button color="secondary" variant="outlined">Secondary</gstock-button>
</gstock-tooltip>

<gstock-tooltip color="information" content="This is a information tooltip">
  <gstock-button color="information" 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

Establece el atributo trigger en click para que el tooltip se muestre al hacer clic en lugar de pasar el mouse.

Click to Toggle

<gstock-tooltip content="Click again to dismiss" trigger="click">
  <gstock-button>Click to Toggle</gstock-button>
</gstock-tooltip>

Manual Trigger

Los tooltips se pueden controlar mediante programación programáticamente con el atributo trigger establecido en manual.

Utilice el atributo open para controlar cuándo se muestra el tooltip.

Toggle Manually

<gstock-button>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.

No Arrow

<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.

I'm not just a tooltip, I'm a tooltip with HTML!

Hover me

<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.

Hover me

<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>