Salesforce Helptext like Custom Tooltip using JQuery

Author posted by Jitendra on Posted on under category Categories HTML, Salesforce and tagged as Tags , , , with 1 Comment on Salesforce Helptext like Custom Tooltip using JQuery

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
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

Related posts

  • swetha m

    Hi..

    I am able to get help bubble with page block section item but i dont want header..
    i am not able to get help bubble if i set show header =false…

    Please help