Something wonderful is gonna happen!
Intro Root Texts Colors Layout Containers


Add a comment with a tooltip

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>