How is help text rendered?

Question

The "Focus" field below has some help text that appears when the mouse is hovered over the info icon and disappears when the mouse leaves the icon:

I needed to take a screenshot of the help text, so I was wondering if there was a way to force the text bubble to appear. I tried setting the element state of <lightning-helptext> and to "hover", but this didn't work:

I don't have any XML knowledge and am very new to Salesforce, so I'm not quite sure what to try next.

Could someone please shed some light on what's happening behind the scenes when I hover over the icon (I noticed that the data-position-id attribute changes on each hover) and whether there is a way to make the text persistent using only the browser inspector?

PS: My apologies if I've chosen the wrong tags.

---

EDIT: To be clear, I was able to take the screenshot by hovering my mouse over the icon and pressing the "PrtSc" button on my keyboard. But I'm more interested in how the help text is being rendered, hence the title of my post. Would the Lightning Developer Guide guide help here?

Answer 1

If you use ⊞ Win+⇧ Shift+S in Microsoft Windows, Snip freezes the screen as it was at that point in time so you can take your screenshot. In the animation below, the first frame where the screen starts to darken is when I pressed the key combo.

And here's the snipped image:

I believe there's an equivalent tool for Macs and Linux users, too, but I'm not as familiar with those OSes these days.

The main point of this answer is to learn keyboard shortcuts, as they might just prove useful someday.

---

To force the bubble to appear, at least temporarily, find the following code in the inspector:

<lightning-primitive-bubble
  class="slds-popover slds-popover_tooltip slds-nubbin_top-left slds-fall-into-ground slds-hide" 
(...other attributes omitted here)>
<div class="slds-popover__body">
    Example Text
  </div></lightning-primitive-bubble>

And change the class list to:

  class="slds-popover slds-popover_tooltip slds-nubbin_top-left" 

---

Note that this effect will only persist as long as you don't hover over the element or make it inactive by using the Tab key. The component that's responsible for the transitions is the button element. It uses focus, blur, mouseenter, mouseleave, and touchstart to show/hide using those CSS classes. You can use the Event Inspector to remove these methods:

Which will permanently disable (until reload) the behaviors attached.

Answer 2

The below answer is for your edited question. i.e. how the help text is being rendered?

The answer is - while creating any custom field we will have one option like 'Help text'. Whatever text you have entered in this, will be visible in that field info icon on hover over.

You can find more details here to create any custom field:

https://help.salesforce.com/s/articleView?id=sf.adding_fields.htm&type=5 https://salesforce.vidyard.com/watch/y22hvtDSEpUKKPPUYGC1TX

And also to edit the help text of any field you can use the same flow as above.