A tooltip is a simple component used to specify extra information about something when the pointer is passed over a textThis is additional information.... The dotted line below a text indicates that there is a tooltip.
<p>A tooltip is...<span class="be-tooltip">passed over a text<span class="be-tooltip-text">This is additional information...</span></span>.</p>
Tooltips positions
beCSS offers only two positions for tooltips: top and bottom.
Please hover me for top tooltip.I am a top tooltip!!
Please hover me for bottom tooltip.I am a bottom tooltip!!
The defaulti position es top, and for this you simply have to use the be-tooltip-text class, while for the bottom use be-tooltip-text-bottom.
<p><span class="be-tooltip">Please...<span class="be-tooltip-text">I am a top tooltip!!</span></span></p>
<p><span class="be-tooltip">Please...<span class="be-tooltip-text-bottom">I am a bottom tooltip!!</span></span></p>
<!-- Tooltips Classes -->
.be-tooltip <!-- general class for tooltips -->
.be-tooltip-text <!--default top position -->
.be-tooltip-text-bottom <!-- for the bottom -->
Customizing tooltips
You can modify the style of the tooltip by adding classes. For example you can use the be-rounded class to round the corners.
You can make many other changes for it go to the Variables and Elements sections.
Please hover me for a custom tooltip.I am a custom tooltip!!
<p><span class="be-tooltip">Please hover...<span class="be-tooltip-text be-rounded">I am a custom tooltip!!</span></span></p>
