Add small overlays of content, like those on the iPad, to any element for housing secondary information. Hover over the button to trigger the popover. Requires Tooltip to be included.
- -Four options are available: top, right, bottom, and left aligned.
-Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
-Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
-Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
-Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
-No markup shown as popovers are generated from javascript and content within a data attribute.
Enable popovers via javascript:
-$('#example').popover(options)
-
- Options can be passed via data attributes or javascript. For data attributes, append the option name to data-, as in data-animation="".
| Name | -type | -default | -description | -
|---|---|---|---|
| animation | -boolean | -true | -apply a css fade transition to the tooltip | -
| html | -boolean | -true | -Insert html into the popover. If false, jquery's text method will be used to insert content into the dom. Use text if you're worried about XSS attacks. |
-
| placement | -string|function | -'right' | -how to position the popover - top | bottom | left | right | -
| selector | -string | -false | -if a selector is provided, tooltip objects will be delegated to the specified targets | -
| trigger | -string | -'hover' | -how popover is triggered - hover | focus | manual | -
| title | -string | function | -'' | -default title value if `title` attribute isn't present | -
| content | -string | function | -'' | -default content value if `data-content` attribute isn't present | -
| delay | -number | object | -0 | -
- delay showing and hiding the popover (ms) - does not apply to manual trigger type -If a number is supplied, delay is applied to both hide/show -Object structure is: |
-
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
+For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.
- -Initializes popovers for an element collection.
-Reveals an elements popover.
-$('#element').popover('show')
- Hides an elements popover.
-$('#element').popover('hide')
- Toggles an elements popover.
-$('#element').popover('toggle')
- Hides and destroys an element's popover.
-$('#element').popover('destroy')
-
-
-
-
-
- Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
+No markup shown as popovers are generated from javascript and content within a data attribute.
Add dismiss functionality to all alerge messages with this plugin.
-No markup shown as popovers are generated from javascript and content within a data attribute.
Enable popovers via javascript:
-$('#example').popover(options)
+ Enable popovers via javascript:
+$('#example').popover(options)
- Options can be passed via data attributes or javascript. For data attributes, append the option name to data-, as in data-animation="".
| Name | -type | -default | -description | -
|---|---|---|---|
| animation | -boolean | -true | -apply a css fade transition to the tooltip | -
| html | -boolean | -true | -Insert html into the popover. If false, jquery's text method will be used to insert content into the dom. Use text if you're worried about XSS attacks. |
-
| placement | -string|function | -'right' | -how to position the popover - top | bottom | left | right | -
| selector | -string | -false | -if a selector is provided, tooltip objects will be delegated to the specified targets | -
| trigger | -string | -'hover' | -how popover is triggered - hover | focus | manual | -
| title | -string | function | -'' | -default title value if `title` attribute isn't present | -
| content | -string | function | -'' | -default content value if `data-content` attribute isn't present | -
| delay | -number | object | -0 | -
- delay showing and hiding the popover (ms) - does not apply to manual trigger type -If a number is supplied, delay is applied to both hide/show -Object structure is: |
-
Options can be passed via data attributes or javascript. For data attributes, append the option name to data-, as in data-animation="".
| Name | +type | +default | +description | +
|---|---|---|---|
| animation | +boolean | +true | +apply a css fade transition to the tooltip | +
| html | +boolean | +true | +Insert html into the popover. If false, jquery's text method will be used to insert content into the dom. Use text if you're worried about XSS attacks. |
+
| placement | +string|function | +'right' | +how to position the popover - top | bottom | left | right | +
| selector | +string | +false | +if a selector is provided, tooltip objects will be delegated to the specified targets | +
| trigger | +string | +'hover' | +how popover is triggered - hover | focus | manual | +
| title | +string | function | +'' | +default title value if `title` attribute isn't present | +
| content | +string | function | +'' | +default content value if `data-content` attribute isn't present | +
| delay | +number | object | +0 | +
+ delay showing and hiding the popover (ms) - does not apply to manual trigger type +If a number is supplied, delay is applied to both hide/show +Object structure is: |
+
For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.
+For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.
-Initializes popovers for an element collection.
-Reveals an elements popover.
-$('#element').popover('show')
- Hides an elements popover.
-$('#element').popover('hide')
- Toggles an elements popover.
-$('#element').popover('toggle')
- Destroys an element's popover.
-$('#element').popover('destroy')
-
+ Initializes popovers for an element collection.
+Reveals an elements popover.
+$('#element').popover('show')
+ Hides an elements popover.
+$('#element').popover('hide')
+ Toggles an elements popover.
+$('#element').popover('toggle')
+ Hides and destroys an element's popover.
+$('#element').popover('destroy')
+
-
- Add dismiss functionality to all alerge messages with this plugin.
-Add dismiss functionality to all alerge messages with this plugin.
+Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.
- -Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.
+ +Enable dismissal of an alert via javascript:
-$(".alert").alert()
+ Enable dismissal of an alert via javascript:
+$(".alert").alert()
- Just add data-dismiss="alert" to your close button to automatically give an alert close functionality.
<a class="close" data-dismiss="alert" href="#">×</a>+
Just add data-dismiss="alert" to your close button to automatically give an alert close functionality.
<a class="close" data-dismiss="alert" href="#">×</a>-
Wraps all alerts with close functionality. To have your alerts animate out when closed, make sure they have the .fade and .in class already applied to them.
Closes an alert.
-$(".alert").alert('close')
+ Wraps all alerts with close functionality. To have your alerts animate out when closed, make sure they have the .fade and .in class already applied to them.
Closes an alert.
+$(".alert").alert('close')
- Bootstrap's alert class exposes a few events for hooking into alert functionality.
-| Event | -Description | -
|---|---|
| close | -This event fires immediately when the close instance method is called. |
-
| closed | -This event is fired when the alert has been closed (will wait for css transitions to complete). | -
Bootstrap's alert class exposes a few events for hooking into alert functionality.
+| Event | +Description | +
|---|---|
| close | +This event fires immediately when the close instance method is called. |
+
| closed | +This event is fired when the alert has been closed (will wait for css transitions to complete). | +
$('#my-alert').bind('closed', function () {
// do something…
})
- {{_i}}Add small overlays of content, like those on the iPad, to any element for housing secondary information. Hover over the button to trigger the popover. Requires Tooltip to be included.{{/i}}
- -{{_i}}Four options are available: top, right, bottom, and left aligned.{{/i}}
-Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
-Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
-Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
-Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
-{{_i}}No markup shown as popovers are generated from javascript and content within a data attribute.{{/i}}
{{_i}}Enable popovers via javascript:{{/i}}
-$('#example').popover({{_i}}options{{/i}})
-
- {{_i}}Options can be passed via data attributes or javascript. For data attributes, append the option name to data-, as in data-animation="".{{/i}}
| {{_i}}Name{{/i}} | -{{_i}}type{{/i}} | -{{_i}}default{{/i}} | -{{_i}}description{{/i}} | -
|---|---|---|---|
| {{_i}}animation{{/i}} | -{{_i}}boolean{{/i}} | -true | -{{_i}}apply a css fade transition to the tooltip{{/i}} | -
| {{_i}}html{{/i}} | -{{_i}}boolean{{/i}} | -true | -{{_i}}Insert html into the popover. If false, jquery's text method will be used to insert content into the dom. Use text if you're worried about XSS attacks.{{/i}} |
-
| {{_i}}placement{{/i}} | -{{_i}}string|function{{/i}} | -'right' | -{{_i}}how to position the popover{{/i}} - top | bottom | left | right | -
| {{_i}}selector{{/i}} | -{{_i}}string{{/i}} | -false | -{{_i}}if a selector is provided, tooltip objects will be delegated to the specified targets{{/i}} | -
| {{_i}}trigger{{/i}} | -{{_i}}string{{/i}} | -'hover' | -{{_i}}how popover is triggered{{/i}} - hover | focus | manual | -
| {{_i}}title{{/i}} | -{{_i}}string | function{{/i}} | -'' | -{{_i}}default title value if `title` attribute isn't present{{/i}} | -
| {{_i}}content{{/i}} | -{{_i}}string | function{{/i}} | -'' | -{{_i}}default content value if `data-content` attribute isn't present{{/i}} | -
| {{_i}}delay{{/i}} | -{{_i}}number | object{{/i}} | -0 | -
- {{_i}}delay showing and hiding the popover (ms) - does not apply to manual trigger type{{/i}} -{{_i}}If a number is supplied, delay is applied to both hide/show{{/i}} -{{_i}}Object structure is: |
-
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
+{{_i}}For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.{{/i}}
- -{{_i}}Initializes popovers for an element collection.{{/i}}
-{{_i}}Reveals an elements popover.{{/i}}
-$('#element').popover('show')
- {{_i}}Hides an elements popover.{{/i}}
-$('#element').popover('hide')
- {{_i}}Toggles an elements popover.{{/i}}
-$('#element').popover('toggle')
- {{_i}}Hides and destroys an element's popover.{{/i}}
-$('#element').popover('destroy')
-
-
-
-
-
- Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
+{{_i}}No markup shown as popovers are generated from javascript and content within a data attribute.{{/i}}
{{_i}}Add dismiss functionality to all alerge messages with this plugin.{{/i}}
-{{_i}}No markup shown as popovers are generated from javascript and content within a data attribute.{{/i}}
{{_i}}Enable popovers via javascript:{{/i}}
-$('#example').popover({{_i}}options{{/i}})
+ {{_i}}Enable popovers via javascript:{{/i}}
+$('#example').popover({{_i}}options{{/i}})
- {{_i}}Options can be passed via data attributes or javascript. For data attributes, append the option name to data-, as in data-animation="".{{/i}}
| {{_i}}Name{{/i}} | -{{_i}}type{{/i}} | -{{_i}}default{{/i}} | -{{_i}}description{{/i}} | -
|---|---|---|---|
| {{_i}}animation{{/i}} | -{{_i}}boolean{{/i}} | -true | -{{_i}}apply a css fade transition to the tooltip{{/i}} | -
| {{_i}}html{{/i}} | -{{_i}}boolean{{/i}} | -true | -{{_i}}Insert html into the popover. If false, jquery's text method will be used to insert content into the dom. Use text if you're worried about XSS attacks.{{/i}} |
-
| {{_i}}placement{{/i}} | -{{_i}}string|function{{/i}} | -'right' | -{{_i}}how to position the popover{{/i}} - top | bottom | left | right | -
| {{_i}}selector{{/i}} | -{{_i}}string{{/i}} | -false | -{{_i}}if a selector is provided, tooltip objects will be delegated to the specified targets{{/i}} | -
| {{_i}}trigger{{/i}} | -{{_i}}string{{/i}} | -'hover' | -{{_i}}how popover is triggered{{/i}} - hover | focus | manual | -
| {{_i}}title{{/i}} | -{{_i}}string | function{{/i}} | -'' | -{{_i}}default title value if `title` attribute isn't present{{/i}} | -
| {{_i}}content{{/i}} | -{{_i}}string | function{{/i}} | -'' | -{{_i}}default content value if `data-content` attribute isn't present{{/i}} | -
| {{_i}}delay{{/i}} | -{{_i}}number | object{{/i}} | -0 | -
- {{_i}}delay showing and hiding the popover (ms) - does not apply to manual trigger type{{/i}} -{{_i}}If a number is supplied, delay is applied to both hide/show{{/i}} -{{_i}}Object structure is: |
-
{{_i}}Options can be passed via data attributes or javascript. For data attributes, append the option name to data-, as in data-animation="".{{/i}}
| {{_i}}Name{{/i}} | +{{_i}}type{{/i}} | +{{_i}}default{{/i}} | +{{_i}}description{{/i}} | +
|---|---|---|---|
| {{_i}}animation{{/i}} | +{{_i}}boolean{{/i}} | +true | +{{_i}}apply a css fade transition to the tooltip{{/i}} | +
| {{_i}}html{{/i}} | +{{_i}}boolean{{/i}} | +true | +{{_i}}Insert html into the popover. If false, jquery's text method will be used to insert content into the dom. Use text if you're worried about XSS attacks.{{/i}} |
+
| {{_i}}placement{{/i}} | +{{_i}}string|function{{/i}} | +'right' | +{{_i}}how to position the popover{{/i}} - top | bottom | left | right | +
| {{_i}}selector{{/i}} | +{{_i}}string{{/i}} | +false | +{{_i}}if a selector is provided, tooltip objects will be delegated to the specified targets{{/i}} | +
| {{_i}}trigger{{/i}} | +{{_i}}string{{/i}} | +'hover' | +{{_i}}how popover is triggered{{/i}} - hover | focus | manual | +
| {{_i}}title{{/i}} | +{{_i}}string | function{{/i}} | +'' | +{{_i}}default title value if `title` attribute isn't present{{/i}} | +
| {{_i}}content{{/i}} | +{{_i}}string | function{{/i}} | +'' | +{{_i}}default content value if `data-content` attribute isn't present{{/i}} | +
| {{_i}}delay{{/i}} | +{{_i}}number | object{{/i}} | +0 | +
+ {{_i}}delay showing and hiding the popover (ms) - does not apply to manual trigger type{{/i}} +{{_i}}If a number is supplied, delay is applied to both hide/show{{/i}} +{{_i}}Object structure is: |
+
{{_i}}For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.{{/i}}
+{{_i}}For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.{{/i}}
-{{_i}}Initializes popovers for an element collection.{{/i}}
-{{_i}}Reveals an elements popover.{{/i}}
-$('#element').popover('show')
- {{_i}}Hides an elements popover.{{/i}}
-$('#element').popover('hide')
- {{_i}}Toggles an elements popover.{{/i}}
-$('#element').popover('toggle')
- {{_i}}Destroys an element's popover.{{/i}}
-$('#element').popover('destroy')
-
+ {{_i}}Initializes popovers for an element collection.{{/i}}
+{{_i}}Reveals an elements popover.{{/i}}
+$('#element').popover('show')
+ {{_i}}Hides an elements popover.{{/i}}
+$('#element').popover('hide')
+ {{_i}}Toggles an elements popover.{{/i}}
+$('#element').popover('toggle')
+ {{_i}}Hides and destroys an element's popover.{{/i}}
+$('#element').popover('destroy')
+
-
- {{_i}}Add dismiss functionality to all alerge messages with this plugin.{{/i}}
-{{_i}}Add dismiss functionality to all alerge messages with this plugin.{{/i}}
+{{_i}}Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.{{/i}}
- -{{_i}}Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.{{/i}}
+ +{{_i}}Enable dismissal of an alert via javascript:{{/i}}
-$(".alert").alert()
+ {{_i}}Enable dismissal of an alert via javascript:{{/i}}
+$(".alert").alert()
- {{_i}}Just add data-dismiss="alert" to your close button to automatically give an alert close functionality.{{/i}}
<a class="close" data-dismiss="alert" href="#">×</a>+
{{_i}}Just add data-dismiss="alert" to your close button to automatically give an alert close functionality.{{/i}}
<a class="close" data-dismiss="alert" href="#">×</a>-
{{_i}}Wraps all alerts with close functionality. To have your alerts animate out when closed, make sure they have the .fade and .in class already applied to them.{{/i}}
{{_i}}Closes an alert.{{/i}}
-$(".alert").alert('close')
+ {{_i}}Wraps all alerts with close functionality. To have your alerts animate out when closed, make sure they have the .fade and .in class already applied to them.{{/i}}
{{_i}}Closes an alert.{{/i}}
+$(".alert").alert('close')
- {{_i}}Bootstrap's alert class exposes a few events for hooking into alert functionality.{{/i}}
-| {{_i}}Event{{/i}} | -{{_i}}Description{{/i}} | -
|---|---|
| {{_i}}close{{/i}} | -{{_i}}This event fires immediately when the close instance method is called.{{/i}} |
-
| {{_i}}closed{{/i}} | -{{_i}}This event is fired when the alert has been closed (will wait for css transitions to complete).{{/i}} | -
{{_i}}Bootstrap's alert class exposes a few events for hooking into alert functionality.{{/i}}
+| {{_i}}Event{{/i}} | +{{_i}}Description{{/i}} | +
|---|---|
| {{_i}}close{{/i}} | +{{_i}}This event fires immediately when the close instance method is called.{{/i}} |
+
| {{_i}}closed{{/i}} | +{{_i}}This event is fired when the alert has been closed (will wait for css transitions to complete).{{/i}} | +
$('#my-alert').bind('closed', function () {
// {{_i}}do something…{{/i}}
})
-