Default Tooltip
Huro offers a very simple versatile and CSS only tooltip. The
example below is the default and basic version. There are 6
default positions: hint--top-left,
hint--top, hint--top-right,
hint--bottom-left, hint--bottom,
hint--bottom-left. The tooltip text is controlled
via the data-hint attribute.
<span class="tag is-rounded is-solid hint--top-left" data-hint="Iam a top left tooltip">Top Left</span>
<span class="tag is-rounded is-solid hint--top" data-hint="Iam a top center tooltip">Top Center</span>
<span class="tag is-rounded is-solid hint--top-right" data-hint="Iam a top right tooltip">Top Right</span>
<span class="tag is-rounded is-solid hint--bottom-left" data-hint="Iam a bottom left tooltip">Bottom Left</span>
<span class="tag is-rounded is-solid hint--bottom" data-hint="Iam a bottom center tooltip">Bottom Center</span>
<span class="tag is-rounded is-solid hint--bottom-right" data-hint="Iam a bottom right tooltip">Bottom Right</span>
Light Tooltip
Huro offers a very simple versatile and CSS only tooltip. The
example below is the light version. Reference default tooltips
to learn more about placement options. To use the light
tooltip, add the hint--light class.
<span class="tag is-rounded is-solid hint--light hint--top-left" data-hint="Iam a top left tooltip">Top Left</span>
<span class="tag is-rounded is-solid hint--light hint--top" data-hint="Iam a top center tooltip">Top Center</span>
<span class="tag is-rounded is-solid hint--light hint--top-right" data-hint="Iam a top right tooltip">Top Right</span>
<span class="tag is-rounded is-solid hint--light hint--bottom-left" data-hint="Iam a bottom left tooltip">Bottom Left</span>
<span class="tag is-rounded is-solid hint--light hint--bottom" data-hint="Iam a bottom center tooltip">Bottom Center</span>
<span class="tag is-rounded is-solid hint--light hint--bottom-right" data-hint="Iam a bottom right tooltip">Bottom Right</span>
Tooltip Colors
Huro tooltips can have different colors that can be changed
with a simple CSS class. Available color classes are:
hint--light, hint--primary,
hint--info, hint--success,
hint--warning and hint--error.
<span class="tag is-rounded is-solid hint--top" data-hint="Iam a default tooltip">Default</span>
<span class="tag is-rounded is-solid hint--light hint--top" data-hint="Iam a light tooltip">Light</span>
<span class="tag is-rounded is-solid hint--primary hint--top" data-hint="Iam a primary tooltip">Primary</span>
<span class="tag is-rounded is-solid hint--info hint--top" data-hint="Iam a info tooltip">Info</span>
<span class="tag is-rounded is-solid hint--success hint--top" data-hint="Iam a success tooltip">Success</span>
<span class="tag is-rounded is-solid hint--warning hint--top" data-hint="Iam a warning tooltip">Warning</span>
<span class="tag is-rounded is-solid hint--error hint--top" data-hint="Iam a danger tooltip">Error</span>
Tooltip Shapes
Huro tooltips can have different shapes, based oon what you
need in your design. Available shape classes are:
hint--rounded and hint--bubble. Note
that the bubble tooltip has uppercase set by default ans
doesn't have a tooltip arrow.
<span class="tag is-rounded is-solid hint--primary hint--top" data-hint="Iam a default tooltip">Default</span>
<span class="tag is-rounded is-solid hint--primary hint--rounded hint--top" data-hint="Iam a rounded tooltip">Rounded</span>
<span class="tag is-rounded is-solid hint--primary hint--bubble hint--top" data-hint="I am a bubble tooltip">Bubble</span>