Lets get started.
Adding Output Script to our XPage:
In my applications I have two custom controls that make up the application layout: One custom control for the navigation bar and one that contains the navigation bar custom control and serves as the application layout control as a starting point to create new XPages. I will add the output script to the application layout custom control. Doing it like this will make sure that I can use the tooltip wherever I need it.
Open your XPage / Custom Control where you’d like to add the output script to. In the “Controls” tab, double-click on “Other…” and from the prompt, select “Output script” under the “Core Controls” category, then click “OK”:
Click on the output script, open the “All Properties” section and click on the button in the field “value” to open the script editor:
Save and close your XPage / Custom Control.
Now, what this script does is, it checks if any of your elements has an attribute “data-toggle” and if it is set to “tooltip”. If so, it will check for other attributes related to tooltip (i.e. position) and then display the tooltip accordingly. We’ll add these attributes in the next step.
Adding attributes to an element to activate the tooltip:
In this example, I am setting the attributes for an Edit Box. Select your edit box, open “All Properties”, locate the property “attrs” under the section “basics” and add an attribute:
The first attribute I am adding is the “data-toggle” attribute. Enter “data-toggle” as the attribute name and “tooltip” as the value:
Next, I need to add the text I’d like to have displayed in the tooltip. Add a new attribute with the name “title” and as a value enter “This is a test”:
And last, but not least, I tell the tooltip where to appear. Add another attribute with the name “data-placement” and as a value enter “bottom”:
And you are all set. If you open your XPage in the browser and hover with your mouse over the field, the tooltip will be displayed:
More options for the tooltip can be found here. For instance, you can add a delay, but don’t forget to add “data-” to the attribute name (i.e. data-delay). That happened to me and I was wondering why it was not working. Reading something carefully does help ;o).