##### Milestone 30%

##### Release 60%

- Mailbox
- Calendar
- Contacts
- Media
- Documents
- Project
- Forum
- Dashboard

# Tooltip & Popover

### Tooltips

#### Static Tooltip

Four options are available: top, right, bottom, and left aligned.

Top Tooltip
Bottom Tooltip
Left Tooltip
Right Tooltip

#### Color

Five information situations are available: use the class `primary`, `success`, `warning`, `info`, `danger` .

Primary
Success
Info
Warning
Danger

#### Triggers Click

You can select the action that triggers the tooltip either by adding the `data-trigger="click"` attribute or by setting the trigger parameter via Javascript.

#### Animation

Apply two CSS style rotate and scale transition to the tooltip when you click the button.

### Popover official website

#### Static Popover

Four options are available: top, right, bottom, and left aligned.

### Popover Bottom

Sed posuere consectetur est at lobortis. Aenean eu leo quam.

### Popover Top

Sed posuere consectetur est at lobortis. Aenean eu leo quam.

### Popover Right

Sed posuere consectetur est at lobortis. Aenean eu leo quam.

### Popover Left

Sed posuere consectetur est at lobortis. Aenean eu leo quam.

#### Color

Five information situations are available: use the class `primary`, `success`, `warning`, `info`, `danger` .

### Primary

Sed posuere consectetur est at lobortis. Aenean eu leo quam.

### Success

Sed posuere consectetur est at lobortis. Aenean eu leo quam.

### Info

Sed posuere consectetur est at lobortis. Aenean eu leo quam.

### Warning

Sed posuere consectetur est at lobortis. Aenean eu leo quam.

### Danger

Sed posuere consectetur est at lobortis. Aenean eu leo quam.

#### Triggers Click

You can select the action that triggers the popover either by adding the `data-trigger="focus / hover"` attribute or by setting the trigger parameter via Javascript.

#### Animation

Apply two CSS style rotate and scale transition to the popover when you click the button.

### WebUI Popover official website

#### Auto Detect Placement

Auto detect the placement, always poped in page, can be contrained by horizontal or vertical

Auto
Auto
Auto

#### Pop With Animation

Set animation by data-attribute or code

Pop Fade

#### Delayed show/hide

Control delay show/hide by data-attribute or code

Delay Show Delay Hide

#### Advanced examples

Table in popover, larget content, async mode, iframe mode

Pop with table

# | First Name | Last Name | Username
--- | --- | --- | ---
1 | Mark | Otto | @mdo
2 | Jacob | Thornton | @fat
3 | Larry | the Bird | @twitter

Pop with list

- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros

Pop large content

Ea ipsum qui sit commodo cillum reprehenderit voluptate minim occaecat. Mollit tempor nostrud est aliqua qui. Nisi est non exercitation magna qui. Pariatur aute proident est cupidatat veniam officia excepteur. Tempor incididunt exercitation ex Lorem culpa qui amet. Irure sint est ut aute minim labore reprehenderit dolore. Proident aliquip non consequat proident.

Tempor nostrud nisi ipsum duis ipsum deserunt fugiat. Aute et dolore do anim mollit proident elit veniam elit. Laboris consectetur ullamco deserunt aute aliquip voluptate culpa aute adipisicing. Consequat nostrud reprehenderit adipisicing magna ullamco id amet. Sunt consectetur enim est cillum. Ullamco deserunt commodo voluptate culpa dolore adipisicing velit proident. Adipisicing qui adipisicing nisi cillum.

Excepteur qui proident aliquip eu. Nisi aliqua nisi sint minim irure consequat. Officia voluptate nulla et dolor sint aute qui proident et. Nostrud ut excepteur proident excepteur eu dolor. Ullamco culpa laboris cillum cillum id laborum sint. Ipsum veniam aute consequat sit adipisicing nulla. Enim excepteur ipsum amet amet.

Do dolor id nisi occaecat excepteur nostrud occaecat deserunt elit. Velit occaecat tempor consequat esse veniam nulla exercitation. Quis commodo cillum do laboris ea ut tempor fugiat. Cillum fugiat commodo eu laborum cillum reprehenderit magna. Id in fugiat quis sunt laboris cillum. Dolore incididunt qui laboris quis aliqua ad enim consequat nulla. Exercitation anim id nulla sit culpa deserunt.

Pop iframe

### Toolbar.js official website

#### Default

#### Colorful

#### Customizable

#### Animations