The Tooltip plugin is small pop-up box that appears when the user moves the mouse pointer over an element. To create a tooltip, add the data-toggle="tooltip" attribute to an element. Use the title attribute to specify the text that should be displayed inside the tooltip.
<a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a>
By default, the tooltip will appear on top of the element. Use the data-placement attribute to set the position of the tooltip on top, bottom, left or the right side of the element:
<a href="#" data-toggle="tooltip" data-placement="right" title="Hooray!">Hover</a>
The Popover plugin is a pop-up box that appears when the user clicks on an element. It can contain much more content in comparision to the tooltip. To create a popover, add the data-toggle="popover" attribute to an element. Use the title attribute to specify the header text of the popover, and use the data-content attribute to specify the text that should be displayed inside the popover's body.
<a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover</a>
By default, the popover will appear on the right side of the element. Use the data-placement attribute to set the position of the popover on top, bottom, left or the right side of the element.
<a href="#" title="Header" data-toggle="popover" data-placement="bottom" data-content="Content">Click</a>
By default, the popover is closed when you click on the element again. However, you can use the data-trigger="focus" attribute which will close the popover when clicking outside the element.
<a href="#" title="Dismissible popover" data-toggle="popover" data-trigger="focus" data-content="Click anywhere in the document to close this popover">Click me</a>
If you want the popover to be displayed when you move the mouse pointer over the element, use the data-trigger attribute with a value of "hover".
<a href="#" title="Header" data-toggle="popover" data-trigger="hover" data-content="Some content">Hover over me</a>
You need to add this script in your webpage to make the tooltip work.
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
The Scrollspy plugin is used to automatically update links in a navigation list based on scroll position.
<!-- The scrollable area --> <body data-spy="scroll" data-target=".navbar" data-offset="50"> <!-- The navbar - The <a> elements are used to jump to a section in the scrollable area --> <nav class="navbar navbar-inverse navbar-fixed-top"> ... <ul class="nav navbar-nav"> <li><a href="#section1">Section 1</a></li> ... </ul> </nav> <!-- Section 1 --> <div id="section1"> <h1>Section 1</h1> <p>Try to scroll this page and look at the navigation bar while scrolling!</p> </div> ... </body>
Add data-spy="scroll" to the element that should be used as the scrollable area (often this is the <body> element).
Then add the data-target attribute with a value of the id or the class name of the navigation bar (.navbar). This is to make sure that the navbar is connected with the scrollable area.
Note that scrollable elements must match the ID of the links inside the navbar's list items (<div id="section1"> matches <a href="#section1">).
The optional data-offset attribute specifies the number of pixels to offset from top when calculating the position of scroll. Default is 10 pixels.
The element with data-spy="scroll" requires the CSS position property, with a value of "relative" to work properly.
The Affix plugin allows an element to become locked to an area on the page. This is often used with navigation menus or social icon buttons to make them stick at a specific area while scrolling the page up and down. The plugin toggles this behavior on and off (changes the value of CSS position from static to fixed), depending on scroll position.
Add data-spy="affix" to the element you want affixed. Optionally, add the data-offset-top|bottom attribute to calculate the position of the scroll.
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
<ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="205">
The affix plugin toggles between three classes: affix, affix-top and affix-bottom. Each class represents a particular state. You must add CSS properties to handle the actual positions with the exception of position:fixed on the affix class.
The plugin adds the affix-top or affix-bottom class to indicate the element is in its top-most or bottom-most position. Positioning with CSS is not required at this point.
Scrolling past the affixed element triggers the actual affixing - This is where the plugin replaces the affix-top or affix-bottom class with the affix class. At this point, you must add the CSS top or bottom property to position the affixed element in the page.
If a bottom offset is defined, scrolling past it replaces the affix class with affix-bottom. Since offsets are optional, setting one requires you to set the appropriate CSS. In this case, add position:absolute when necessary.
Leave a comment