How to Get Custom Label Value in Lightning Component?

Custom Label in Salesforce is text that will be covert to any language that Salesforce support. To access Custom Label in Lightning Component use following syntax.

<ui:outputText value=”{!$Label.c.LabelName}”/> where is namespace. Default namespace of an org is c. If you have created a namespace myapps, then your code to access custom label is {!$Label.myapps.LabelName}

If you have created a Custom Label which name is description, then your code in lightning component is {!$Label.c.description}.

In JavaScript controller or helper you can get custom label value $A.get(“{!$Label.c.description}”)

var desc = $A.get(“{!$Label.c.description}”);

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.