As in the previous chapter tooltips were described. Basically tooptips and popover are same, The difference between tooltip and popover is popover appears on click of targeted button and tooltip appears on hover of targeted button and popover can contain much more content than tooltip.
Top and right Popover
In this example there are two Popover buttons. Top and right Popover.
Where script is used for Popover and popover() is used
while popover class is targeted. Bootstrap class btn is
used make a responsive button. While class btn-info is
used for background color of the button. Here m-2 class
is used for margins. The data-toggle attribute is used
to hide and show the Popover. The data-placement attribute
is used to specify the position of the Popover. While data-content
attribute is used for the text which will appear in the Popover window.
<scripttype="text/javascript">$(function(){ $('[data-toggle="popover"]').popover() })</script><buttontype="button"class="btn btn-info m-2"data-toggle="popover"data-placement="top"data-content="This is top side popover">Top side Popover</button><buttontype="button"class="btn btn-info m-2"data-toggle="popover"data-placement="right"data-content="This is right side popover">Right side Popover</button>
Output of above code
Bottom and left Popover
In this example there are two Popover buttons. Bottom and left Popover.
Where script is used for Popover and popover() is used
while popover class is targeted. Bootstrap class btn is
used make a responsive button. While class btn-info is
used for background color of the button. Here m-2 class
is used for margins. The data-toggle attribute is used
to hide and show the Popover. The data-placement attribute
is used to specify the position of the Popover. While data-content
attribute is used for the text which will appear in the Popover window.
<scripttype="text/javascript">$(function(){ $('[data-toggle="popover"]').popover() })</script><buttontype="button"class="btn btn-info m-2"data-toggle="popover"data-placement="bottom"data-content="This is bottom side popover">Bottom side Popover</button><buttontype="button"class="btn btn-info m-2"data-toggle="popover"data-placement="left"data-content="This is left side popover">Left side Popover</button>
Output of above code
The Best
Comment here
If you have any query, if you want to know something about any of technical course related to computer science field, if you have any suggestion about relevant to uploaded content or if you anything wrong here (any mistake in content) than please contact us. Keep in mind, comment should be according to community guidelines.
