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

Posted

in

,

by


Related Posts

Comments

One response to “Salesforce Helptext like Custom Tooltip using JQuery”

  1. swetha m Avatar
    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

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Discover more from Jitendra Zaa

Subscribe now to keep reading and get access to the full archive.

Continue Reading