### Select Language

### Activity

- Team
- Projects
- Schedule

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

#### Recently viewed

Browser Support Blog post
Twitch API Blog post
Twitter Auth Blog post

#### Recent Members

Alice C. Software Engineer
Tara S. UI/UX Designer
Jimmy H. Project Manager

- Elements Hub
- Colors
- Helpers
- Buttons
- Blocks
- Content
- Tags & Badges
- Icons
  - Line Icons Light
  - Line Icons Regular
  - Font Awesome 5
  - Feather Icons
- Cards
  - Basic Cards
  - Advanced Cards
  - Bulma Cards
- Table
- Tooltips
- Forms
  - Inputs
  - Input Addons
  - Textarea
  - Selects
  - Custom
  - File Input
- Toggles
  - Checkboxes
  - Radios
  - Switches

# Tooltips

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