In this Bootstrap Tootip are explained. Basically the Tooltip is box/window which appears while hover some element. Hope you will enjoy this tutorial.
Top and right Tooltip
In this example there are two tooltip button. Top and right Tooltip.
Where script is used for tooltips and tooltip() is used
while tooltip 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 tooltip. The data-placement attribute
is used to specify the position of the tooltip. While title
class is used for the text which will appear in the tooltip window.
<scripttype="text/javascript">$(function(){ $('[data-toggle="tooltip"]').tooltip() })</script><buttontype="button"class="btn btn-info m-2"data-toggle="tooltip"data-placement="top"title="Top side Tooltip">Top side Tooltip</button><buttontype="button"class="btn btn-info m-2"data-toggle="tooltip"data-placement="right"title="Right side Tooltip">Right side Tooltip</button>
Output of above code
Bottom and left Tooltip
In this example there are two tooltip button. Bottom and left Tooltip.
Where script is used for tooltips and tooltip() is used
while tooltip 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 tooltip. The data-placement attribute
is used to specify the position of the tooltip. While title
class is used for the text which will appear in the tooltip window.
<scripttype="text/javascript">$(function(){ $('[data-toggle="tooltip"]').tooltip() })</script><buttontype="button"class="btn btn-info m-2"data-toggle="tooltip"data-placement="bottom"title="Bottom side Tooltip">Bottom side Tooltip</button><buttontype="button"class="btn btn-info m-2"data-toggle="tooltip"data-placement="left"title="Left side Tooltip">Left side Tooltip</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.
