{"type":"doc","content":[{"type":"paragraph","content":[{"text":"Creating a custom ","type":"text"},{"text":"component tooltip ","type":"text","marks":[{"type":"strong"}]},{"text":"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. ","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"wide","width":770,"widthType":"pixel"},"content":[{"type":"media","attrs":{"width":1087,"id":"cff648b9-e24c-4112-a986-e65030c8f016","collection":"contentId-2931851268","type":"file","height":490}}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"To Implement: ","type":"text"}]},{"type":"paragraph","content":[{"text":"STEP 1: Navigate to the translator. ","type":"text"}]},{"type":"paragraph","content":[{"text":"STEP 2: Use the component.setTooltip{} API.","type":"text"}]},{"type":"expand","attrs":{"title":"This API allows you to pass an HTML block containing the information you want displayed. "},"content":[{"type":"paragraph","content":[{"text":"You can use the built-in ","type":"text"},{"text":"ROWdiv","type":"text","marks":[{"type":"code"}]},{"text":" CSS class to style your tooltip. For example: ","type":"text"}]},{"type":"codeBlock","attrs":{"language":"lua"},"content":[{"text":"-- Component Tooltip to display port and author info\ncomponent.setTooltip{data=[[\n

Port:

1943

Author:

Tyler Brown

]]}","type":"text"}]}]},{"type":"paragraph","content":[{"text":"STEP 3: Commit these changes.","type":"text"}]},{"type":"expand","attrs":{"title":"Press the commit button."},"content":[{"type":"mediaSingle","attrs":{"layout":"center","width":730,"widthType":"pixel"},"content":[{"type":"media","attrs":{"width":844,"id":"c2b77e3a-b220-45f8-9634-b6f2a080e942","collection":"contentId-2931851268","type":"file","height":157}}]},{"type":"paragraph"}]},{"type":"paragraph","content":[{"text":"STEP 4: The tooltip will appear when you are hovering over the component on the dashboard. ","type":"text"}]},{"type":"panel","attrs":{"panelIconId":"atlassian-warning","panelIcon":":warning:","panelColor":"#FFFAE6","panelType":"custom"},"content":[{"type":"paragraph","content":[{"text":"The component must be running to display the tooltip.","type":"text"}]}]},{"type":"paragraph"},{"type":"paragraph"}],"version":1}