Tooltip

Thanks to Tooltips you can display auxiliary jumping content which will be displayed after mouse hover particular text. Tooltips may contain ordinary text, picture, button, and its content can be divided into columns. On the other hand, you can not use headings h1 … h6. Tooltip has two predefined positions. Tooltip can be displayed below the text or over the text. You will manage it with addition of “tooltip-top” or “tooltip-bottom” class to “.tooltip-content” element.

How to use the Tooltips:

<div class="size-960">
<div class="line">
<p>Successful project <span class="tooltip-container"><span class="tooltip-content tooltip-top">Lightweight, more intuitive and useful responsive CSS framework</span>Responsee was born!</span> Responsee proved good and significantly contributed to great satisfaction of our client.</p>
</div>
</div>

Practical example of Tooltip:

Practical example of Tooltip on the bottom:

<div class="size-960">
<div class="line">
<p>Successful project <span class="tooltip-container"><span class="tooltip-content tooltip-bottom">Lightweight, more intuitive and useful responsive CSS framework</span>Responsee was born!</span> Responsee proved good and significantly contributed to great satisfaction of our client.</p>
</div>
</div>

Practical example of Tooltip with the button:

<div class="size-960">
<div class="line">
<p>Successful project <span class="tooltip-container"><span class="tooltip-content tooltip-top"><a class="button submit-btn rounded-btn" href="#">Get More Info</a></span>Responsee was born!</span> Responsee proved good and significantly contributed to great satisfaction of our client.</p>
</div>
</div>

Practical example of Tooltip with the 2 columns:

<div class="size-960">
<div class="line">
<p>Successful project <span class="tooltip-container"><span class="tooltip-content tooltip-top"><span class="line"><span class="margin"><span class="s-6">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</span><span class="s-6">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</span></span></span></span>Responsee was born!</span> Responsee proved good and significantly contributed to great satisfaction of our client.</p>
</div>
</div>

Practical example of Tooltip with the image:

<div class="size-960">
<div class="line">
<p>Successful project <span class="tooltip-container"><span class="tooltip-content tooltip-top"><img src="/path-to-the-image.jpg" alt=""></span>Responsee was born!</span> Responsee proved good and significantly contributed to great satisfaction of our client.</p>
</div>
</div>