Unlimited Websites Cpanel Hosting Only $0.99 per month - Click here


Easily create a nice looking tooltip.


Tooltips are small, interactive, textual hints for mainly graphical elements. When using icons for actions you can use a tooltip to give people clarification on its function.

Add the data-tip attribute to your element and put the text inside it, also if needed can set position using data-tip-position attribute add either top, bottom, left, right on data-tip-position to control the position.

Butter Cake Tool tip is purely based on CSS, no Javascript required.

      <button class="btn primary" data-tip="Default">Default</button>
      <button class="btn primary" data-tip="right" data-tip-position="right">Right</button>
      <button class="btn primary" data-tip="bottom" data-tip-position="bottom">Bottom</button>
      <button class="btn primary" data-tip="Left" data-tip-position="left">Left</button>

Active Tool Tip

Also can make the Tool tip shown by default by adding .tooltip-active class.

        <!-- ACTIVE TOOLTIP -->
        <button class="btn primary tooltip-active" data-tip="Active tool tip">Default</button>

We hope you have enjoyed using Butter Cake and if you feel like it has helped you out and want to support the team you can help us by donating or backing us on Patreon. Any amount would help support and continue development on this project and is greatly appreciated.