Create a Tooltip

Creating a custom component tooltip on the Dashboard is a useful way to display important information at a glance without cluttering the main interface. This tooltip can include various types of information, such as the IP address, port in use, author, and organization name.

To Implement:

STEP 1: Navigate to the translator.

STEP 2: Use the ui.setTooltip API.

This API allows you to pass an HTML block containing the information you want displayed.

You can use the built-in CUSTrow, CUSTlabel, and CUSTvalue CSS classes to style your tooltip. For example:

ui.setTooltip{   
  data = [[   
    <div class='CUSTrow'>   
      <div class='CUSTlabel'>]]..Label..[[:</div>   
      <div class='CUSTvalue'>]]..Value..[[</div>   
    </div>   
  ]]   
}   

STEP 3: Commit these changes.

Press the commit button.

STEP 4: The tooltip will appear when you are hovering over the component on the dashboard.

Note

The component must be running to display the tooltip.