Enable Tooltips for Disabled Items in JavaScript DropDownList Components

3 mins read

In web development, it’s common to encounter scenarios where certain options in a DropDownList need to be disabled to prevent user interaction. However, it’s also helpful to provide users with information about why an option is disabled. This can be achieved by displaying tooltips on disabled items. This guide will walk you through the steps to disable items in a DropDownList and show tooltips for those items…

Step1: Disabling Items in DropDownListComponent

To disable specific items in the DropDownListComponent, you can add a class to the items you want to disable and set their pointerEvents style to auto. This will prevent any interaction with the disabled items.

Here’s a code snippet to disable items with specific values:

 const listItems = dropObj.current.popupObj.element.getElementsByTagName('li');
 for (const listItem of listItems) {
     let value = listItem.getAttribute('data-value');
     if (value === '3' || value === '5' || value === '7') {
        listItem.classList.add('e-disabled');
        listItem.style.pointerEvents = 'auto';
     }
 }

Step2: Restricting Selection of Disabled Items

To ensure that disabled items cannot be selected, you can handle the onSelect event and cancel the selection if the item has the e-disabled class.

const onSelect = (args) => {
  if (args.item.classList.contains('e-disabled')) {
    args.cancel = true;
  }
};

Step3: Displaying Tooltips for Disabled Items

To show tooltips when hovering over disabled items, you can use the Tooltip component from @syncfusion/ej2-popups. The onBeforeRender event can be utilized to set the content of the tooltip based on the item’s data.

Here’s how you can initialize and display the tooltip:

const onOpen = (args) => {
  tooltip = new Tooltip({
    beforeRender: onBeforeRender,
    content: 'Loading...',
    position: 'TopCenter',
    target: '.e-list-item.e-disabled',
  });
  tooltip.appendTo('body');
};

const onBeforeRender = (args) => {
   if (args.target.classList.contains('e-disabled')) {
      const result = dropObj.current.dataSource;
      for (let i = 0; i < result.length; i++) {
          if (result[i].text === args.target.textContent) {
              tooltip.content = result[i].content;
              tooltip.dataBind();
              break;
          }
      }
   }
};

Step4: Cleaning Up Tooltips

It’s important to properly clean up tooltips when they are no longer needed, such as when the DropDownList is closed or removed from the DOM, to prevent memory leaks.

function destroyTooltips(tooltips) {
   tooltips.forEach((tooltip) => {
      tooltip.destroy();
  });
}

For a live demonstration, you can refer to the prepared sample on StackBlitz: React DropDownList Sample

For more details and examples, please consult the official Syncfusion documentation: DropDownList Tooltip Documentation.

Additional Resources

For more information on implementing dropdown lists and tooltips, you can refer to the following resources:

Did you find this information helpful?

Yes

Comments (0)