Overview

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

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.

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

JavaScript

Set the following URL into the App's JavaScript and CSS Customization settings , under the Upload JavaScript for PC option.

• https://js.kintone.com/jquery/2.2.4/jquery.min.js
• https://js.kintone.com/popmodal/1.26/popModal.min.js

CSS

Set the following URL into the App's JavaScript and CSS Customization settings , under the Upload CSS File for PC option.

• https://js.kintone.com/popmodal/1.26/popModal.min.css
• https://js.kintone.com/font-awesome/v5.2.0/css/fontawesome-all.min.css

Sample code

Prepare the following JavaScript code in a text editor and navigate to the Kintone App's settings. Upload the file into the Upload JavaScript for PC option of the JavaScript and CSS Customization settings .

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

jQuery.noConflict();
(function($) {
  'use strict';
  kintone.events.on(['app.record.create.show', 'app.record.edit.show'], function(event) {

    // Create the hintModal class and button using jQuery
    var hintbutton = $(
      '<span class="hintModal fas fa-exclamation-circle fa-lg">' +
        '<div class="hintModal_container">Lunch is being bought from Kintone Deli. ' +
          'You can give cash to @kintone for payment. Prices: Sandwich ($5), Hamburger ($7), ' +
          'Hot Dog ($3), Fruit ($3), Chicken Nuggets ($5) </div>' +
      '</span>'
    );
    $('.hintModal').hintModal({});
    // Add the button to the empty element field in the app
    kintone.app.record.getSpaceElement('add').appendChild(hintbutton[0]);

    return event;

  });
})(jQuery);

The JavaScript and CSS Customization settings page should look like the following.

Attention

Caution: The order in which Javascript and CSS are uploaded to an app matters. In this example, ensure that the jQuery and popModal Javascript imports are uploaded before the custom Javascript file. You can change the order of uploads by clicking and dragging on the arrows for each item on the Upload Javascipt / CSS page.

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.

Code Explanation

Event handling

1
2
3

kintone.events.on(['app.record.create.show', 'app.record.edit.show'], function(event) {
  // ...
});

The tooltips are implemented when the app.record.create.show or the app.record.edit.show events are triggered.

Create the tooltip contents

1
2
3
4
5
6
7

var hintbutton = $(
  '<span class="hintModal fas fa-exclamation-circle fa-lg">' +
      '<div class="hintModal_container">Lunch is being bought from Kintone Deli. ' +
      'You can give cash to @kintone for payment. Prices: Sandwich ($5), Hamburger ($7), ' +
      'Hot Dog ($3), Fruit ($3), Chicken Nuggets ($5) </div>' +
  '</span>'
);

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 <div> tag.

Create the tooltip

1

$('.hintModal').hintModal({});

The created HTML is converted into a tooltip.

Implement the tooltip

1

kintone.app.record.getSpaceElement('add').appendChild(hintbutton[0]);

The getSpaceElement method is used to retrieve the element of the Blank space fields.

Return the event object

1

return event;

Return the event object to apply the changes to the form.

Reference

popModal Documentation