Implement Tooltips into Forms
This article introduces how to implement tooltips into records of Kintone Apps by using popModal. The usage of tooltips is a great alternative to using labels to save space in the form.
popModal is a jQuery plugin for showing tooltips, titles and modal dialogs. This article uses the hintModal feature of the library to display tooltips.
Prepare the App
Create the form
Create an App with the following fields.
|Field Type||Field Name||Field Code|
|User Selection||Ordered By:||ordered_by|
|Check Box||Your lunch order:||lunch_order|
We will customize the App so that the hint icon will appear in the blank space. When inputting data for a new record, an exclamation icon will appear that when hovered over, will display further details of the content of the App. This example will display restaurant information, which employee will pay for the lunch, and the individual prices of each menu item.
Set the Libraries
After saving the settings and clicking on Update App, add a new record. An icon with an exclamation mark should appear where the Blank space field is located. Hover over the icon to view the tooltip.
Create the tooltip contents
An HTML element including the tooltip details is created with jQuery. The icon of the tooltip is set as an exclamation mark. The text contents of the tooltip is set inside the
Create the tooltip
The created HTML is converted into a tooltip.
Implement the tooltip
The getSpaceElement method is used to retrieve the element of the Blank space fields.
Return the event object
Return the event object to apply the changes to the form.