Bootstrap Tooltips and Popovers

Creating Tooltips With Twitter Bootstrap a tooltip is a small pop-up that appears when user places the mouse pointer over an element such as link or buttons to provide hint or information about the element being hovered.
Tooltips can be very helpful for the new visitors of your website because they enable the user to know the purpose of icons and links by placing the mouse pointer over them.
Triggering the Tooltips
Tooltips can be triggered via JavaScript — just call the tooltip() Bootstrap method with the “id” or “class” selector of the target element in your JavaScript code.
Example

   <script type="text/javascript">
    $(document).ready(function(){
        $(".tooltip-examples a").tooltip();
    });
    </script>

The output of the above example will look something like this:

Position Setting of Tooltips
You can set tooltips to appear on top, right, bottom and left sides of an element
Example

   <script type="text/javascript">
    $(document).ready(function(){
        $(".tip-top").tooltip({placement : 'top'});
        $(".tip-right").tooltip({placement : 'right'});
        $(".tip-bottom").tooltip({placement : 'bottom'});
        $(".tip-left").tooltip({ placement : 'left'});
    });
    </script>

Options
There are certain options which may be passed to tooltip() Bootstrap method to customize the functionality of the tooltip plug-in

Name Type Default Value Description
animation boolean true Apply a CSS fade transition to the tooltip.
html boolean false Insert html into the tooltip. 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 ‘top’ Sets the position of the tooltip — top | bottom | left | right | auto. When “auto” value is specified, it will dynamically reorient the tooltip.For example, if placement value is “auto top”, the tooltip will display on the top when possible, otherwise it will display on the bottom.
selector string false If a selector is provided, tooltip objects will be attached to the specified targets.
title string | function Sets the default title value if title attribute isn’t present.
trigger string ‘hover focus’ Specify how tooltip is triggered — click | hover | focus | manual. Note you case pass trigger mutliple, space seperated, trigger types.
delay number | object 0 Time to delay in showing and hiding the tooltip (ms) — does not apply to manual trigger type.If a number is supplied, delay is applied to both hide/show Object structure is:
delay: { show: 500, hide: 100 }
container string | false false Appends the tooltip to a specific element container: ‘body’
template string ‘<div class=”tooltip” role=”tooltip”><div class=”tooltip-arrow”></div><div class=”tooltip-inner”></div></div>’ Base HTML to use when creating the tooltip. The tooltip’s title will be inserted into the element having the class .tooltip-inner and the element with the class .tooltip-arrow will become the tooltip’s arrow.The outermost wrapper element should have the .tooltip class.
viewport string | object { selector: ‘body’, padding: 0 } Keeps the tooltip within the bounds of this element. Example: viewport: ‘#viewport’ or { selector: ‘#viewport’, padding: 0 }

You may also set these options for tooltips using the data attributes — just append the option name to data-, like data-animation=””, data-placement=”” etc.
Methods
These are the standard bootstrap’s tooltip methods:
$().tooltip(options)
This method attaches the tooltip handler to a group of elements.
Example

<script type="text/javascript">
    $(document).ready(function(){
        $(".tooltip-examples a").tooltip({
            title : 'It works in absence of title attribute.'
        });
    });
    </script>

.tooltip(‘hide’)
This method hides an element’s tooltip.

Example

<script type="text/javascript">
    $(document).ready(function(){
        $(".hide-tooltip").click(function(){
            $(".tooltip-examples a").tooltip('hide');
        }); 
    });
    </script>

.tooltip(‘show’)
This method reveals an element’s tooltip.

Example

<script type="text/javascript">
    $(document).ready(function(){
        $(".show-tooltip").click(function(){
            $(".tooltip-examples a").tooltip('show');
        }); 
    });
    </script>

Creating Popovers with Twitter Bootstrap

Popover is a small overlay of content that is used to display secondary information of any element when it is clicked by a user, like those on the iPad.


Triggering the Popovers

Popovers can be triggered via JavaScript — just call the popover() Bootstrap method with the "id" or "class" selector of the required element in your JavaScript code.

Example

   <script type="text/javascript">
    $(document).ready(function(){
        $(".popover-examples a").popover(); 
    });
    </script>

The output of the above example will look something like this:

Setting the Position of Popovers
You can set popovers to appear on top, right, bottom and left sides of an element.
Example

   <script type="text/javascript">
    $(document).ready(function(){
        $(".pop-top").popover({placement : 'top'});
        $(".pop-right").popover({placement : 'right'});
        $(".pop-bottom").popover({placement : 'bottom'});
        $(".pop-left").popover({ placement : 'left'});
    });
    </script>

Options
There are certain options which may be passed to popover() Bootstrap method to customize the functionality of the tooltip plug-in.

Name Type Default Value Description
animation boolean true Apply a CSS fade transition to the tooltip.
html boolean false Insert html into the tooltip. 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 ‘top’ Sets the position of the tooltip — top | bottom | left | right | auto. When “auto” value is specified, it will dynamically reorient the tooltip.For example, if placement value is “auto top”, the tooltip will display on the top when possible, otherwise it will display on the bottom.
selector string false If a selector is provided, tooltip objects will be attached to the specified targets.
title string | function Sets the default title value if title attribute isn’t present.
trigger string ‘hover focus’ Specify how tooltip is triggered — click | hover | focus | manual. Note you case pass trigger mutliple, space seperated, trigger types.
delay number | object 0 Time to delay in showing and hiding the tooltip (ms) — does not apply to manual trigger type.If a number is supplied, delay is applied to both hide/show Object structure is:
delay: { show: 500, hide: 100 }
container string | false false Appends the tooltip to a specific element container: ‘body’
template string ‘<div class=”tooltip” role=”tooltip”><div class=”tooltip-arrow”></div><div class=”tooltip-inner”></div></div>’ Base HTML to use when creating the tooltip. The tooltip’s title will be inserted into the element having the class .tooltip-inner and the element with the class .tooltip-arrow will become the tooltip’s arrow.The outermost wrapper element should have the .tooltip class.
viewport string | object { selector: ‘body’, padding: 0 } Keeps the tooltip within the bounds of this element. Example: viewport: ‘#viewport’ or { selector: ‘#viewport’, padding: 0 }

You may also set these options for popover s using the data attributes — just append the option name to data-, like data-animation=””, data-placement=”” etc.
Methods
These are the standard bootstrap’s popover methods:
$().popover(options)
This method attaches the popover handler to a group of elements.

Example

   <script type="text/javascript">
    $(document).ready(function(){
        $(".popover-examples a").popover({
            title : 'Default title value'
        });
    });
    </script>

.popover(‘show’)
This method reveals an element’s popover.

Example

<script type="text/javascript">
    $(document).ready(function(){
        $(".show-popover").click(function(){
            $(".popover-examples a").popover('show');
        }); 
    });
    </script>

.popover(‘destroy’)
This method hides and destroys an element’s popover.

Example

<script type="text/javascript">
    $(document).ready(function(){
        $(".destroy-popover").click(function(){
            $(".popover-examples a").popover('destroy');
        }); 
    });
    </script>

xhamster

Admin has written 171 articles