Adding Tooltips to Form Fields

1

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!

2

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){vartargetField=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

3

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

 

4

Hello Leslie!

Hmmm, just to clarify, did you add the following JS to your “Javascript and CSS Customization” from Add Link too?

https://unpkg.com/tippy.js@3/dist/tippy.all.min.js

5

Yes. Here is a screenshot:

6

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

7

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?

 

8

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

https://developer.kintone.io/hc/en-us/articles/360009339614

Yes, you can add multiple events, but like I said, the script might not work on all events.