Select Language

Activity

Joshua S. Las Vegas, NV
Melany W. San Jose, CA
Esteban C. Miami, FL
Tara S. New York, NY
The slicer project getslicer.io
31%
5 / 24
Metamovies reworked metamovies.co
84%
28 / 31
Fast Pizza redesign fastpizza.com
60%
25 / 39

Call Danny at Colby's

Today - 11:30am

Meeting with Alice

Today - 01:00pm

Answer Annie's message

Today - 01:45pm

Send new campaign

Today - 02:30pm

Project review

Today - 03:30pm

Call Trisha Jackson

Today - 05:00pm

Write proposal for Don

Today - 06:00pm

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.

Top Left Top Center Top Right Bottom Left Bottom Center Bottom Right

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

Top Left Top Center Top Right Bottom Left Bottom Center Bottom Right

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

Default Light Primary Info Success Warning 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.

Default Rounded Bubble

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