Avatar

Adding Tooltips to Form Fields

Leslie Kane

Hello,

I'm new here, and I apologize in advance is there is already a post about this. I looked but didn't find one.

 

I would like to add tooltips to some of my form fields that will pop up when the user hovers over the field or field title (or maybe even a little question-mark graphic that would show up next to the title?).

 

Is this possible?

 

Thanks!

Follow 2 followers
0

7 comments

Avatar
Yuzo Arai 0 votes

As one of many options, you could use the Tippy.js to do it.

You first add the following URL to the JS in your app:
https://unpkg.com/tippy.js@3/dist/tippy.all.min.js

Then you could write something like:

(function() {
    'use strict';
    /* global tippy */

    kintone.events.on('app.record.detail.show', function(event) {
        var targetField = kintone.app.record.getFieldElement('Text');

        tippy(targetField, {
            content: 'HELP!!!',
            arrow: true
        });
    });
})();

This example creates a tooltip on the "Text" field.

Or you could check out the following page for your reference:

Kintone Developer Program - Profile Tooltip Plug-in
https://developer.kintone.io/hc/en-us/articles/360014771274-Profile-Tooltip-Plug-in

I hope this helps

0
Comment actions Permalink
Avatar
Leslie Kane 0 votes

Thank you, Yuzo.

I'm still having a bit of a problem. I copied the code you shared and pasted it into a notepad file, changed 'Text' to the Field Code name of my field and changed 'HELP!!!' to the message I want to display, then saved the file as a .js file and uploaded it to the App Settings > Javascript and CSS Customization page. Nothing happens when I hover over the field.

Any idea what I did wrong?

(Thanks again!)

 

0
Comment actions Permalink
Avatar
Yuzo Arai 1 vote

I tried it myself and seems to work fine on the record detail page so the code seems to be fine...

Just to clarify, the example code that I gave only works on the record detail page.
To make it work on other events, you need to edit the event section of the code.
*I'm not sure whether it will work on other events, but it definitely works on the record detail page.

Check out the following page for other events:
https://developer.kintone.io/hc/en-us/articles/213149757

1
Comment actions Permalink
Avatar
Leslie Kane 0 votes

Ah, ok, I see it on the record detail page. I actually need it on the screen for adding a new record. Can you tell me what the event is called for adding a new record? Can I add a second line to the events code so it will work in both pages?

 

0
Comment actions Permalink
Avatar
Yuzo Arai 1 vote
Record Create-Onload Event is app.record.create.show
I posted the event list in the previous commment;
it lists all the event in Kintone so please check that for your future reference.

Kintone Developer Program - Kintone JavaScript API List
Yes, you can add multiple events, but like I said, the script might not work on all events.
1
Comment actions Permalink