In your component markup put the SVG inside an CDATA container and surround it with DIV giving an aura:id.
<div aura:id="svg_content">
<![CDATA[
<svg width="120px" height="120px" viewBox="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M120,108 C120,114.6 114.6,120 108,120 L12,120 C5.4,120 0,114.6 0,108 L0,12 C0,5.4 5.4,0 12,0 L108,0 C114.6,0 120,5.4 120,12 L120,108 L120,108 Z" id="Shape" fill="#2A739E"/>
<path d="M77.7383308,20 L61.1640113,20 L44.7300055,63.2000173 L56.0543288,63.2000173 L40,99.623291 L72.7458388,54.5871812 L60.907727,54.5871812 L77.7383308,20 Z" id="Path-1" fill="#FFFFFF"/>
</g>
</svg>
]]>
</div>
Then in the renderer.js for the component, override the afterRender method:
afterRender: function(component, helper) {
this.superAfterRender();
var svg = component.find("svg_content");
var value = svg.getElement().innerText;
value = value.replace("<![CDATA[", "").replace("]]>", "");
svg.getElement().innerHTML = value;
}
This is a workaround that works for any SVGs outside of those provided by SLDS.
The simplest way I can think of is to set the focus on your popup, then create a method to close the popup when focus is lost. One important thing to note is that writing to the dom is slow, so you need to provide a delay before assigning focus. Here the target is a text input, you will have to update to an appropriate target to focus on within your un-hidden div.
app.cmp
<div aura:id="submissionPopover" class="slds-hide">
<textarea aura:id="comment" class="slds-textarea" onblur="{!c.hidePopover}" />
</div>
controller.js
({
getRating : function(cmp, evt, helper) {
/* previous logic... */
var myPopover = cmp.find('submissionPopover');
$A.util.removeClass(myPopover, 'slds-hide');
setTimeout(function(){helper.setFocus(cmp)}, 300);
},
hidePopover : function(cmp, evt) {
var myPopover = cmp.find('submissionPopover');
$A.util.toggleClass(myPopover, 'slds-hide');
}
)}
helper.js
({
setFocus : function(cmp) {
cmp.find("comment").getElement().focus();
}
})
Hope that helps!
Best Answer
You can change font color and background of
lighting:helptextpopover by overriding CSS style within yourComponent.css file.For instance, in this case, we will get a popover with a red background and a gray text:
But be careful as this approach will apply this style to all popovers on the page.