Tooltip
Provides ADDITIONAL information on hover or focus. You know the drill.
Link to section titled: Component
Component
Share
Tooltip
- html<!-- COMPONENT-START: nc-tooltip -->
<span class="nc-has-tooltip" style="anchor-name: --tooltip-anchor-1">
<button
class="nc-button"
type="button"
aria-label="Share article"
aria-describedby="tooltip-1"
>
<svg
viewBox="0 0 24 24"
aria-hidden="true"
fill="none"
stroke="currentColor"
stroke-width="1.8"
stroke-linecap="round"
stroke-linejoin="round"
class="nc-icon"
>
<circle cx="18" cy="5" r="2.6" />
<circle cx="6" cy="12" r="2.6" />
<circle cx="18" cy="19" r="2.6" />
<path d="M8.4 10.8 15.6 6.6M8.4 13.2l7.2 4.2" />
</svg>
</button>
<span
class="nc-tooltip"
role="tooltip"
id="tooltip-1"
style="position-anchor: --tooltip-anchor-1"
>
Share
</span>
</span>
<!-- COMPONENT-END: nc-tooltip --> Link to section titled: Examples
Examples
All positions
If you need to position it to the bottom or to either side.
Share
Share
Share
Share
All positions
- html<div class="nc-cluster -far">
<!-- COMPONENT-START: nc-tooltip -->
<span class="nc-has-tooltip" style="anchor-name: --tooltip-anchor-5">
<button
class="nc-button"
type="button"
aria-label="Share article"
aria-describedby="tooltip-2"
>
<svg
viewBox="0 0 24 24"
aria-hidden="true"
fill="none"
stroke="currentColor"
stroke-width="1.8"
stroke-linecap="round"
stroke-linejoin="round"
class="nc-icon"
>
<circle cx="18" cy="5" r="2.6" />
<circle cx="6" cy="12" r="2.6" />
<circle cx="18" cy="19" r="2.6" />
<path d="M8.4 10.8 15.6 6.6M8.4 13.2l7.2 4.2" />
</svg>
</button>
<span
class="nc-tooltip"
role="tooltip"
id="tooltip-2"
style="position-anchor: --tooltip-anchor-5"
data-position="block-start"
>
Share
</span>
</span>
<!-- COMPONENT-END: nc-tooltip -->
<!-- COMPONENT-START: nc-tooltip -->
<span class="nc-has-tooltip" style="anchor-name: --tooltip-anchor-2">
<button
class="nc-button"
type="button"
aria-label="Share article"
aria-describedby="tooltip-3"
>
<svg
viewBox="0 0 24 24"
aria-hidden="true"
fill="none"
stroke="currentColor"
stroke-width="1.8"
stroke-linecap="round"
stroke-linejoin="round"
class="nc-icon"
>
<circle cx="18" cy="5" r="2.6" />
<circle cx="6" cy="12" r="2.6" />
<circle cx="18" cy="19" r="2.6" />
<path d="M8.4 10.8 15.6 6.6M8.4 13.2l7.2 4.2" />
</svg>
</button>
<span
class="nc-tooltip"
role="tooltip"
id="tooltip-3"
style="position-anchor: --tooltip-anchor-2"
data-position="inline-end"
>
Share
</span>
</span>
<!-- COMPONENT-END: nc-tooltip -->
<!-- COMPONENT-START: nc-tooltip -->
<span class="nc-has-tooltip" style="anchor-name: --tooltip-anchor-3">
<button
class="nc-button"
type="button"
aria-label="Share article"
aria-describedby="tooltip-4"
>
<svg
viewBox="0 0 24 24"
aria-hidden="true"
fill="none"
stroke="currentColor"
stroke-width="1.8"
stroke-linecap="round"
stroke-linejoin="round"
class="nc-icon"
>
<circle cx="18" cy="5" r="2.6" />
<circle cx="6" cy="12" r="2.6" />
<circle cx="18" cy="19" r="2.6" />
<path d="M8.4 10.8 15.6 6.6M8.4 13.2l7.2 4.2" />
</svg>
</button>
<span
class="nc-tooltip"
role="tooltip"
id="tooltip-4"
data-position="block-end"
style="position-anchor: --tooltip-anchor-3"
>
Share
</span>
</span>
<!-- COMPONENT-END: nc-tooltip -->
<!-- COMPONENT-START: nc-tooltip -->
<span class="nc-has-tooltip" style="anchor-name: --tooltip-anchor-4">
<button
class="nc-button"
type="button"
aria-label="Share article"
aria-describedby="tooltip-5"
>
<svg
viewBox="0 0 24 24"
aria-hidden="true"
fill="none"
stroke="currentColor"
stroke-width="1.8"
stroke-linecap="round"
stroke-linejoin="round"
class="nc-icon"
>
<circle cx="18" cy="5" r="2.6" />
<circle cx="6" cy="12" r="2.6" />
<circle cx="18" cy="19" r="2.6" />
<path d="M8.4 10.8 15.6 6.6M8.4 13.2l7.2 4.2" />
</svg>
</button>
<span
class="nc-tooltip"
role="tooltip"
id="tooltip-5"
style="position-anchor: --tooltip-anchor-4"
data-position="inline-start"
>
Share
</span>
</span>
<!-- COMPONENT-END: nc-tooltip -->
</div>