Similar to a bootstrap tooltip we also have bootstrap pop movers a pop over is different in that it
accommodates more content including a header
in this example.
We've applied to pop over to a link element to pop over its position to the right but as you'll see
this can be changed to create a pop over select or create an HMO element that you'd like to apply it
to in this case.
We've applied it to a link element using the 8a in our element.
We've created a data a data toggle attribute set to pop over this is necessary for the pop over to function.
We can give the pop over a title in this case.
We've set it to test header and you can see that text displayed right here
we can also give the pop over some content using the data content attribute.
We have the text sample paragraph displayed in our pop over content area.
Lastly we have a data placement attribute which allows you to specify the position of the pop over in
this case.
We have it set to the right.
Other options include top bottom left.
So we changed this to bottom
and see that it's now changed the position
once you've completed that portion it's necessary to initialize the pop over using J.
Query to do so insert the following javascript code before the closing body type
in our browser we can see that the popo pop over opens when we click on the link it only closes If we
click on the link again so if we click anywhere on the page it doesn't close.
We can add the attribute
data trigger equals focus and this will make it so that we can click anywhere on the page in the pop
over will close
if we set the data trigger to hover
we can view and dismiss the pop over by placing our mouse on or off the element.