{% call SGBuilder.SGSection({ title: 'Tooltip component', id: 'tooltip' }) %}
  {% call GridBuilder.Grid() %}
    {% call GridBuilder.GridColumn({ md: 12 }) %}
      <div style="background: #ccc; padding: 4rem 2rem">
        {% call SGBuilder.SGRow() %}
          <button x-tooltip="Tooltip message" class="button">Auto tooltip</button>
          <button x-tooltip.top="Tooltip message" class="button">Top tooltip</button>
          <button x-tooltip.right="Tooltip message" class="button">Right tooltip</button>
          <button x-tooltip.bottom="Tooltip message" class="button">Bottom tooltip</button>
          <button x-tooltip.left="Tooltip message" class="button">Left tooltip</button>
        {% endcall %}
      </div>
    {% endcall %}

    {% call GridBuilder.GridColumn({ md: 12 }) %}
      <div style="background: #000; color: #fff; padding: 4rem 2rem">
        {% call SGBuilder.SGRow() %}
          <button x-tooltip.light="Tooltip message" class="button">Auto tooltip</button>
          <button x-tooltip.light.top="Tooltip message" class="button">Top tooltip</button>
          <button x-tooltip.light.right="Tooltip message" class="button">Right tooltip</button>
          <button x-tooltip.light.bottom="Tooltip message" class="button">Bottom tooltip</button>
          <button x-tooltip.light.left="Tooltip message" class="button">Left tooltip</button>
        {% endcall %}
      </div>
    {% endcall %}
  {% endcall %}
{% endcall %}