When UI elements have unclear functionality or purpose, add tooltips to provide immediate context and explanation. This is especially important for icons, checkboxes, and interactive elements where the behavior or consequences aren’t immediately obvious to users.
Tooltips should:
Example from the discussions:
<LemonCheckbox
checked={!!filter.optionalInFunnel}
onChange={(checked) => {
updateFilterOptional({
...filter,
optionalInFunnel: checked,
index,
})
}}
label="Optional step"
tooltip="When checked, this step won't cause users to drop out of the funnel if they skip it"
/>
This practice improves user experience by providing inline documentation that helps users understand functionality without needing to consult external documentation or guess at behavior.
Enter the URL of a public GitHub repository