Welcome back Readers. This is my first blog entry for year 2013, i know its too late. However i can ensure that i have lots of unique post which will come this year. I am starting this year with very light post , mimic the help-text style of Salesforce.
Salesforce like Helptext – Tooltip using JQuery
Download Salesforce Helptext like Tooltip using JQuery – Source Code
Most of the time when i override Visualforce page, customers many time demand for same Standard page layout.
apex:inputField and apex:outputField shows their help bubble (if applicable) when nested within a pageBlockSection component automatically.
If you want to provide your own text instead you can by utilizing the helpText attribute on pageBlockSectionItem. Also you can access the help text within an expression by using the respective $ObjectType global as such:
$ObjectType.Account.Fields.myField__c.inlineHelpText
However, there are scenario when we cant use pageBlockSection component. So, i came up with my own helptext CSS and javascript. For this post i am using JQuery and JQuery tooltip plugin.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Salesforce Helptext like Custom Tooltip using JQuery</title>
<link rel="stylesheet" href="jquery.tooltip.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="http://jquery.bassistance.de/tooltip/jquery.tooltip.js" type="text/javascript"></script>
<script type="text/javascript">
$Jtool = jQuery.noConflict();
$Jtool(
function() {
$spnEle = $Jtool('.spnCustomTooltip');
$spnEle.find('img').tooltip({showURL: false});
$spnEle.mouseover(function() {
$Jtool(this).find('img').addClass('helpButtonOn_cust');
});
$spnEle.mouseleave(function() {
$Jtool(this).find('img').removeClass('helpButtonOn_cust');
});
}
);
</script>
</head>
<body>
<div id="main">
Sample
<span class="spnCustomTooltip">
<img src="s.gif" class="helpButton_cust" title='This is Sample Custom Tooltip / Helptext like Standard Salesforce Help Text'>
</span>
</div>
</body>
</html>
Download Salesforce Helptext like Tooltip using JQuery – Source Code
