Lightning:helpText Comonent in Lighting Out

There is some issue of CSS classes in lightning out if you are using <lightning:helpText> in lightning out. Here we are providing some CSS classes to use in your Cisualforce page.

Let’s create a lightning component which use <lightning:helpText> component named helpTextInLightningOut.cmp.

content=”The tooltip displays on the lower left of the icon or above the icon if space is available. It automatically adjusts its position according to the viewport.”

Create a Visualforce page to use above created lightning component. In your Visualforce page use <style> tag and  paste following CSS style.

.slds-popover__header {
	position: relative;
	padding: .5rem .75rem;
	word-wrap: break-word

.slds-popover {
	position: relative;
	border-radius: .25rem;
	width: 20rem;
	min-height: 2rem;
	z-index: 6000;
	background-color: #fff;
	display: inline-block;
	box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .16);
	border: 1px solid #d9dbdd

.slds-popover_tooltip {
	width: auto;
	max-width: 20rem;
	background: #16325c;
	border: 0
.slds-popover--tooltip .slds-popover__body,
.slds-popover_tooltip .slds-popover__body {
	font-size: .75rem;
	color: #fff

.slds-fall-into-ground {
	visibility: hidden;
	opacity: 0;
	transform: translate(0, 0);
	transition: opacity .1s linear, visibility .1s linear, transform .1s linear;
	will-change: transform

.slds-nubbin_bottom-left:before {
	width: 1rem;
	height: 1rem;
	position: absolute;
	transform: rotate(45deg);
	content: '';
	background-color: inherit;
	bottom: -.5rem;
	margin-left: -.5rem

.slds-nubbin_bottom-left:before {
	left: 1.5rem;
	top: 100%;
	margin-top: -.5rem

.slds-nubbin_bottom-left:after {
	box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, .16);
	z-index: -1

.slds-popover :last-child {
	margin-bottom: 0

If you used above style in your Visualforce page, then Lightning:helpText component also work properly in lightning out same as it work in lightning community or in Salesforce lightning interface


Learn more about lightning:helpText click here.


Leave a Reply

Your email address will not be published. Required fields are marked *