[bracket plus]
Navigation
Information Summary

Memory Usage

##### 32.3%

8,6,5,9,8,4,9,3,5,9

CPU Usage

##### 140.05

4,3,5,7,12,10,4,5,11,7

Disk Usage

##### 82.02%

1,2,1,3,2,10,4,12,7

Daily Traffic

##### 62,201

3,12,7,9,2,3,4,5,2
Online Contacts

Marilyn Tarter

Clemson, CA
1 new

Belinda Connor

Fort Kent, ME

Britanny Cevallos

Shiboygan Falls, WI
3 new

Brandon Lawrence

Snohomish, WA
1 new

Andrew Wiggins

Springfield, MA

Theodore Gristen

Nashville, TN

Deborah Miner

North Shore, CA
Offline Contacts

Marilyn Tarter

Clemson, CA

Belinda Connor

Fort Kent, ME

Britanny Cevallos

Shiboygan Falls, WI

Brandon Lawrence

Snohomish, WA

Andrew Wiggins

Springfield, MA

Theodore Gristen

Nashville, TN

Deborah Miner

North Shore, CA
Recent Attachments

IMG_43445

JPG Image

1.2mb

VID_6543

MP4 Video

24.8mb

Tax_Form

Word Document

5.5mb

Getting_Started

PDF Document

12.7mb

Introduction

PDF Document

7.7mb

IMG_43420

JPG Image

2.2mb

IMG_43447

JPG Image

3.2mb

VID_6545

AVI Video

14.8mb

Secret_Document

Word Document

4.5mb

Time & Date

##

######

Events Calendar
Event Today
+ Add Event
Quick Settings

###### More Settings

Account Settings Privacy Settings

#### Tooltip & Popover

Documentation and examples for adding tooltips & popovers, like those found in iOS, to any element on your site.

###### Default Tooltip

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

Static Demo

Tooltip on the top
Tooltip on the bottom
Tooltip on the left
Tooltip on the right

Live Demo

Source Code

    <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
      Hover me
    </button>

Required Attributes

Attribute | Value
--- | ---
`data-placement="[value]"` | top | bottom | left | right
`title="[value]"` | Any title value that you have in mind.

###### Colored Tooltip

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

Static Demo

Tooltip on the top
Tooltip on the bottom
Tooltip on the left
Tooltip on the right
Tooltip on the top
Tooltip on the bottom
Tooltip on the left
Tooltip on the right

Live Demo

Source Code

    <button type="button" class="btn btn-secondary" data-toggle="tooltip-primary" data-placement="top" title="Tooltip on top">
      Hover me
    </button>

Required Attributes

Attribute | Value
--- | ---
`data-toggle="tooltip-[value]"` | primary | success | warning | danger | info | indigo | purple | orange | teal | pink
`data-placement="[value]"` | top | bottom | left | right
`title="[value]"` | Any title value that you have in mind.

###### Default Popover

Documentation and examples for adding Bootstrap popovers, like those found in iOS, to any element on your site.

Static Demo

### Popover top

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

### Popover Bottom

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

### Popover Left

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

### Popover Right

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Live Demo

Source Code

    <button type="button" class="btn btn-secondary"
      data-container="body" data-toggle="popover" data-popover-color="default" data-placement="top" title="Popover top"
      data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Click me</button>

###### Colored Title Popover

A demonstration of colored title background of popover available in all four directions.

Static Demo

### Popover top

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

### Popover Bottom

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

### Popover Left

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

### Popover Right

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Live Demo

Source Code

    <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover"
    data-popover-color="head-primary" data-placement="top" title="Popover top"
    data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
      Click me
    </button>

Required Attributes

Attribute | Value
--- | ---
`data-popover-color="head-[value]"` | primary | success | warning | danger | info | indigo | purple | orange | teal | pink | dark
`data-placement="[value]"` | top | bottom | left | right
`title="[value]"` | Any title value that you have in mind.
`data-content="[value]"` | Any content value that you have in mind.

###### Colored Body Popover

A demonstration of colored body background of popover available in all four directions.

Static Demo

### Popover top

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

### Popover Bottom

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

### Popover Left

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

### Popover Right

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Live Demo

Source Code

    <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover"
    data-popover-color="primary" data-placement="top" title="Popover top"
    data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
      Click me
    </button>

Required Attributes

Attribute | Value
--- | ---
`data-popover-color="[value]"` | primary | success | warning | danger | info | indigo | purple | orange | teal | pink | dark
`data-placement="[value]"` | top | bottom | left | right
`title="[value]"` | Any title value that you have in mind.
`data-content="[value]"` | Any content value that you have in mind.