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

Tempor sit ea laboris eiusmod reprehenderit pariatur reprehenderit. Aute exercitation laboris nostrud eiusmod sit veniam velit esse sunt. Ullamco et velit proident aute ex tempor do est anim. Nisi esse mollit ad cillum ex ullamco. Proident sit dolore nulla cupidatat eiusmod aliquip eu cillum nisi. Laborum dolor ex cupidatat ipsum commodo sit sunt esse anim. Cillum adipisicing minim incididunt laboris deserunt.

Ad ut velit id in et et. Anim consectetur magna sit magna anim excepteur excepteur tempor esse. Aliqua minim esse labore laborum pariatur. Magna ut nisi ut laborum sit est pariatur. Cupidatat in labore nostrud amet. Amet eu cillum exercitation consectetur adipisicing minim. Irure in laboris amet cupidatat consectetur officia anim.

Ea ea ullamco dolore eiusmod qui et adipisicing pariatur qui. Qui pariatur aute deserunt et ipsum tempor ipsum. Aliquip elit non ut nulla est adipisicing voluptate incididunt. Enim sit nulla laborum excepteur anim. Ut sunt reprehenderit ullamco cillum. Laboris duis laboris sint irure officia. Laborum eiusmod excepteur ex ad sint.

Deserunt magna culpa amet cupidatat anim. Nostrud magna occaecat consequat adipisicing ullamco cupidatat reprehenderit sint. Sint tempor sit pariatur ad magna aliqua. Culpa eiusmod duis duis dolor irure proident sit quis nulla. Anim voluptate anim esse esse consectetur aliquip. Exercitation et dolor elit ipsum fugiat ea irure aute. Laborum cupidatat duis labore qui.

Pop iframe

### Toolbar.js official website

#### Default

#### Colorful

#### Customizable

#### Animations