<h2 class="toc">Cursor</h2>

<p>The <code>.cursor-pointer</code> class sets the <code>cursor: pointer</code>
  style. This helps users when you make a non-clickable element clickable (e.g.
  svg, span). (But prefer the <code>a</code> tag instead.)</p>

{% apply view_source %}
<div class="bg-primary text-light p-2 cursor-pointer">.cursor-pointer</div>
{% end %}

<p>The <code>.cursor-default</code> class sets the <code>cursor: default</code>
  style. This helps when you make clickable elements non-clickable -- e.g. a
  non-clickable chart inside a card that hyperlinks to another page.</p>

{% apply view_source %}
<div class="bg-primary text-light p-2 cursor-pointer">
  <span class="cursor-default p-1 mr-3 bg-danger">.cursor-default has no cursor</span>
  .cursor-pointer has a cursor
</div>
{% end %}

<p>The <code>.pointer-events-none</code> class sets the <code>pointer-events:
none</code> style. For example, this helps make SVG text ignore click events
while rectangles respond to the events.</p>

{% apply view_source %}
<svg width="500" height="80">
  <rect x="0" y="0" width="500" height="80" fill="yellow" class="cursor-pointer">
    <title>This tooltip is from the rectangle</title>
  </rect>
  <text x="20" y="30">
    Text hijacks mouse events from the rectangle behind
    <title>This tooltip is from the text</title>
  </text>
  <text x="20" y="65" class="pointer-events-none">.pointer-events-none does not hijack click or hover</text>
</svg>
{% end %}
