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.

<aura:component>
<lightning:helptext
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.”
/>
</aura:component>

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

.slds-popover__body,
.slds-popover__footer,
.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,
.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,
.slds-nubbin_bottom-left-corner:before,
.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:after,
.slds-nubbin--bottom-left:before,
.slds-nubbin_bottom-left-corner:after,
.slds-nubbin_bottom-left-corner:before,
.slds-nubbin_bottom-left:after,
.slds-nubbin_bottom-left:before {
	left: 1.5rem;
	top: 100%;
	margin-top: -.5rem
}

.slds-nubbin--bottom-left:after,
.slds-nubbin_bottom-left-corner:after,
.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

Output:

Learn more about lightning:helpText click here.

 

Very BadBadAverageGoodExcellence (1 votes, average: 5.00 out of 5)
Loading...

Leave a Reply

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