Bs Popover

-

Bootstrap Popover Plugin

The Popover Plugin

The Popover plugin is like to tooltips; it is a pop-up box that appears when the user clicks on an element. The divergence is that the popover tin seat the sack comprise much to a greater extent than content.
Tip: Plugins tin seat the sack survive included individually (using Bootstrap's private "popover.js" file), or all directly (using "bootstrap.js" or "bootstrap.min.js").

How To Create a Popover

To arrive at a popover, add together the data-toggle="popover" attribute to an element.
Use the title attribute to specify the header text of the popover, as well as usage the data-content attribute to specify the text that should survive displayed within the popover's body:
<a href="#" data-toggle="popover" title="Popover Header" data-content="Some content within the popover">Toggle popover</a>
Note: Popovers must survive initialized amongst jQuery: direct the specified chemical cistron as well as telephone vociferation upward the popover() method.
The next code volition enable all popovers inwards the document:

Example

<script>
$(document).ready(function(){
    $('[data-toggle="popover"]').popover();
});</script>

Positioning Popovers

By default, the popover volition seem on the correct side of the element.
Use the data-placement attribute to laid the set of the popover on top, bottom, left or the correct side of the element:

Example

<a href="#" title="Header" data-toggle="popover" data-placement="top" data-content="Content">Click</a>
<a href="#" title="Header" data-toggle="popover" data-placement="bottom" data-content="Content">Click</a>
<a href="#" title="Header" data-toggle="popover" data-placement="left" data-content="Content">Click</a>
<a href="#" title="Header" data-toggle="popover" data-placement="right" data-content="Content">Click</a>
Tip: You tin seat the sack also usage the data-placement attribute amongst a value of "auto", which volition permit the browser arrive at upward one's heed the set of the popover. For example, if the value is "auto left", the popover volition display on the left side when possible, otherwise on the right.

Closing Popovers

By default, the popover is closed when y'all click on the chemical cistron again. However, y'all tin seat the sack usage the data-trigger="focus" attribute which volition unopen the popover when clicking exterior the element:

Example

<a href="#" title="Dismissible popover" data-toggle="popover" data-trigger="focus" data-content="Click anywhere inwards the document to unopen this popover">Click me</a>
Tip: If y'all desire the popover to survive displayed when y'all deed the mouse pointer over the element, usage the data-trigger attribute amongst a value of "hover":

Example

<a href="#" title="Header" data-toggle="popover" data-trigger="hover" data-content="Some content">Hover over me</a>

Comments

Post a Comment

Popular posts from this blog

What Are The Main Components of a Computer System

-
Each part has a purpose and this list will help give you a brief idea of what the purpose if for each. Tower: The tower or computer case is there to protect the components inside. The case works to protect the parts against electrical shock, dirt and other sources of danger that surround your computer. Power Supply: The power supply is found secure inside your tower and offers the main source of power to the motherboard and other components such as your hard drive and Rom drives. The power supply can be changed out for a larger wattage one to ensure better power and cooling to the parts installed on your system. Motherboard: The motherboard acts as the heart of the computer where everything ties into it and works from it. The slots on the motherboard are available for an assortment of components such as the CPU, memory, video, sound, TV tuners etc. CPU: The central processing unit, otherwise known simply as the CPU is the brains of the sy...
Read more

Top Qualities To Look For In An IT Support Team

-
Regardless of how "state of the art" or "updated" your company's technical systems may be, they will at one time or another encounter glitches or breakdowns that will require immediate attention. A company that experiences such issues must have an IT support team that they can turn to in order to acquire fixes and upgrades. Otherwise, a company will experience substantial "down time" or may even lose clients. This could result in life-long issues for the company and could ultimately result in a loss of profit. The best solution to avoid such detrimental issues is to obtain the services of an IT support provider that can prevent such situations from arising. You will need to take advantage of IT support London services that realize that your company will grow over time, and know how to adapt and maintain your technical services to keep up and manage this growth. Additionally, you will only want to deal with an IT su...
Read more

Zanottisw Exe Error - How to Repair Zanottisw Exe Error Completely ?

-
Taking an  error message? Frustrating by having this system error? If you are curious about a suitable method to fix this forms of problem and why your current machine shows up across this error, you may intend to resolve it absolutely with no doubt. Now this is a proper position for you, as it provides you a good solution to resolve this problem completely and properly.  error constantly occurs along with having an error messages, such as: -  -Application error/same message as User .  is a critical procedure in Microsoft windows operating system, it controls system executed documents. Furthermore, it all deals with those Windows xp dll computer files and put down them in to Microsoft windows memory. Therefore, it is essential to restore this error in your Pc since while it gets risky, all those unseen process computer file can use up the stored data slowly. Bad effection induced by  error: 1.Pc works a lo...
Read more