> ## Documentation Index
> Fetch the complete documentation index at: https://pitchprint.com/llms.txt
> Use this file to discover all available pages before exploring further.

# HelpTip Bubbles

> Add hover tooltips to your own layout elements with the data-tip and anchor HTML attributes.

PitchPrint application has an inbuilt help-tip bubble that shows on certain UI elements when users mouse over them. An example is on the Submit button:

<Frame>
  <img src="https://s3.amazonaws.com/helpscout.net/docs/assets/58f1ec6d2c7d3a52b42f8254/images/5900c43a2c7d3a057f88965b/file-As0o2SMv5N.png" alt="Help-tip bubble appearing on mouse over of the Submit button" />
</Frame>

You can add this to your UI elements by following these steps:

<Steps>
  <Step title="Open the layouts section">
    Log unto the layout section: [ttps://pitchprint.net/admin/layouts](https://pitchprint.net/admin/layouts)
  </Step>

  <Step title="Find the element in your layout">
    Select your layout and search for the element you want the help-tip to appear on.
  </Step>

  <Step title="Add the help-tip attributes">
    Add the following html attribute to that element:

    data-tip="Sample Tip Message" anchor="b"
  </Step>

  <Step title="Save and test the tip">
    Save the layout and load your product page, mouse over the element and see it appears.
  </Step>
</Steps>

* data-tip attribute is the message that will appear.
* The anchor is set to b. You can set it to l = left, t = top, b = bottom, r = right. It simply defines the orientation of the help-tip.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.