XPages and Me

My Journey into XPages Development

Dabbling in Bootstrap and Font Awesome Part 5: How to activate the tooltip

If you’d like to make use of the Bootstrap tooltip, you need to activate it by adding some client-side JavaScript to your XPage. Once that is done, you can set the tooltip simply by adding attributes to your control for which you’d like to have a tooltip displayed.

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”:

Image 3

Click on the output script, open the “All Properties” section and click on the button in the field “value” to open the script editor:

Image 4

In the code prompt, enter the following Client Side JavaScript:

$(document).ready(function(){
    $('[data-toggle=tooltip]').tooltip()
});

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:

Image 1

The first attribute I am adding is the “data-toggle” attribute. Enter “data-toggle” as the attribute name and “tooltip” as the value:

Image 2

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”:

Image 3

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”:

Image 4

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:

Image 5

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).

Enjoy!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: