0

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:

enter image description here

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:

Is there some other way to make the text persistent? =

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?

2
  • If what you want to achieve is a screenshot, you could use a tool like (standard windows) Snip & Sketch. It has a feature to delay the screenshot with 3 or 5 seconds, which gives you the time to move your cursor to the helptext and have it appear. Oct 9, 2022 at 12:26
  • @GuyClairbois, I was actually hoping to understand how the text is being rendered. Is this covered in the Lightning Components Developer Guide?
    – user51462
    Oct 9, 2022 at 22:58

2 Answers 2

2

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.

Snipping a screenshot with keyboard shortcuts

And here's the snipped image:

Screenshot taken by the snipping app in Windows

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" 

Class modified to show tooltip

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:

Event Listeners

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

3
  • Thanks @sfdcfox, I managed to get the screenshot, but I wanted to know how the help text was rendered. What do I need to learn to be able to understand what's going on?
    – user51462
    Oct 9, 2022 at 22:27
  • Is this covered in the Lightning Components Developer Guide?
    – user51462
    Oct 9, 2022 at 22:59
  • @user51462 See my edit for more info.
    – sfdcfox
    Oct 9, 2022 at 23:17
0

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.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .