Skip to main content
Version: 1.16.0

Tooltip

Overview

Tooltip component allows the user to display a label or short explanation of the target element when hovering or focusing on the element.


Specification

Property

Here is a list of properties that can be used for modifying the component:

NameTypeDefaultDescriptionRemark
classNamestring""Component class name
idstring""Component id name
placementstring"top"The position of the component relative to the target elementAvailable options: top, left, right, bottom
titlestring""The text shown in the component
container *1string/HTMLElement""The target element to display the componentThe title value will be displayed in the situation below
  • When the container element is hovered
  • When the container element is focused
describeChild *2booleanfalseSetting of the content that the Tooltip represents for the elementSet to false if Tooltip represents a label, or true if Tooltip represents additional information or a supplementary description
info

*1: Please use focusable elements as much as possible and avoid abusing unfocusable elements for accessibility.

*2: By understanding how to use the describeChild property, you can effectively improve the accessibility and usability of your application.

  • Set describeChild to false if the Tooltip represents the purpose of the element itself (provides a label for the element it is attached to).
    • The aria-label attribute will be added to the first child element of the Tooltip component with the value of the title property.
    • For example, the case you have an icon that represents a save mark, and the Tooltip provides a label of the button itself.
        <kuc-tooltip>
      <button aria-label='Save'>
      <span class='icon-save'></span>
      </button>
      <div id='tooltip-ID'>Save</div>
      </kuc-tooltip>
    • You can learn more about aria-label.
  • Set describeChild to true if the Tooltip represents the description of the element (provides additional information or a supplementary description about the element it is attached to).
    • The aria-describedby attribute will be added to the first child element of the Tooltip component with the value of the ID of the tooltip wrapper element.
    • For example, the case you have an icon that represents a question mark, and the Tooltip provides a description or explanation of what the icon represents.
        <kuc-tooltip>
      <button aria-describedby='tooltip-ID'>
      <span class='icon-question-mark'></span>
      </button>
      <div id='tooltip-ID'>This is a help icon. Click for more information</div>
      </kuc-tooltip>
    • You can learn more about aria-describedby.

Constructor

Tooltip(options)
Here is a list of available constructors:

Parameter

NameTypeDefaultDescriptionRemark
optionsobject{}Object that includes component properties

Custom CSS

tip

Please check Custom CSS feature guide at first.

Here is a list of properties that can be used for modifying component style:

Property

Name
--kuc-tooltip-background-color
--kuc-tooltip-color
--kuc-tooltip-font-size
--kuc-tooltip-height
--kuc-tooltip-width

Sample Code

tip

Please check the package installation method first.

Here is a sample code when all parameters are specified:

const Kuc = Kucs['1.x.x'];

const space = kintone.app.record.getSpaceElement('space');
const buttonEl = document.createElement('button');
buttonEl.innerText ='Add';

const tooltip = new Kuc.Tooltip({
title: 'Do not add if it exists.',
container: buttonEl,
placement: 'bottom',
describeChild: true,
className: 'tooltip-class',
id: 'tooltip-id',
});
space.appendChild(tooltip);