Forum Discussion

jaikumar1's avatar
jaikumar1
Mentor
7 years ago

How to add tooltip?

Hi,

 

We are just looking into add tooltip in some of the page labels. For that i have added script in the component and, which get attached respective HTML tags into the specific label. The below code added into the labels, 

 

 

<span class="HelpIcon">
	<a class="lia-link-navigation help-icon lia-tooltip-trigger" id="link_18" href="#"><img class="lia-img-icon-help lia-fa-icon lia-fa-help" alt="Some text" aria-label="Help Icon" id="display_0" src="/skins/images/0920E85D2B8661AC2570D4C45EA5CD7E/base/images/icon_help.png"></a>
</span>

 

After the code added the icon not working as expected, and i identified the render jquery tooltip not getting added into the page

 

LITHIUM.RenderedScripts = [
  "jquery.tools.tooltip-1.2.5.js",
  "Tooltip.js",
  "Entry.js",
  "jquery.tools.tooltip-1.2.5.js",
  "Tooltip.js",
  "Entry.js",
  "jquery.tools.tooltip-1.2.5.js",
  "Tooltip.js",
];	

 and this script

 

LITHIUM.Tooltip({"bodySelector":"body#lia-body","delay":30,"triggerSelector":"#link_16","tooltipContentSelector":"#link_17-tooltip-element .content","position":["bottom","left"],"tooltipElementSelector":"#link_17-tooltip-element","events":{"def":"focus mouseover,blur mouseout"}});

So could you please guide me, how can we apply these additional code into the page? 

No RepliesBe the first to reply