Help Text Tooltip generator
The small "i" tooltip next to a field label — lightning-helptext — explains a field without permanently taking up page space. Style the bubble color and size so it stays legible without overwhelming the label it sits next to.
Your changes autosave in this browser, and the link above reproduces this exact configuration for anyone you send it to.
Live preview
Generated code
<template>
<lightning-helptext content="This value is calculated automatically and cannot be edited." class="studio-helptext"></lightning-helptext>
</template>Design tips for help text tooltips
- Keep tooltip copy to one short sentence; anything longer belongs in inline field help text instead.
- Use a dark bubble background regardless of your page theme — tooltips need to stand out above whatever is behind them.
- Make sure the icon itself is large enough to tap reliably on a touchscreen, not just to click with a mouse.