{"id":3134,"date":"2013-02-04T06:54:50","date_gmt":"2013-02-04T01:24:50","guid":{"rendered":"http:\/\/JitendraZaa.com\/blog\/?p=3134"},"modified":"2013-02-04T06:54:50","modified_gmt":"2013-02-04T01:24:50","slug":"salesforce-helptext-like-custom-tooltip-using-jquery","status":"publish","type":"post","link":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/salesforce-helptext-like-custom-tooltip-using-jquery\/","title":{"rendered":"Salesforce Helptext like Custom Tooltip using JQuery"},"content":{"rendered":"

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.<\/p>\n

\"Salesforce<\/a>
Salesforce like Helptext – Tooltip using JQuery<\/figcaption><\/figure>\n

Download Salesforce Helptext like Tooltip using JQuery – Source Code<\/a><\/p>\n

Most of the time when i override Visualforce page, customers many time demand for same Standard page layout.<\/p>\n

apex:inputField and apex:outputField shows their help bubble (if applicable) when nested within a pageBlockSection component automatically.<\/p>\n

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:<\/p>\n

\n$ObjectType.Account.Fields.myField__c.inlineHelpText\n<\/pre>\n
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 <\/a>and JQuery tooltip plugin<\/a>.<\/p>\n
\n\n<!DOCTYPE html PUBLIC "-\/\/W3C\/\/DTD XHTML 1.0 Transitional\/\/EN" "http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-transitional.dtd">\n<html xmlns="http:\/\/www.w3.org\/1999\/xhtml">\n<head>\n<meta http-equiv="Content-Type" content="text\/html; charset=ISO-8859-1" \/>\n<title>Salesforce Helptext like Custom Tooltip using JQuery<\/title>\n\n<link rel="stylesheet" href="jquery.tooltip.css" \/>\n<script src="http:\/\/code.jquery.com\/jquery-1.8.2.min.js" type="text\/javascript"><\/script>\n<script src="http:\/\/jquery.bassistance.de\/tooltip\/jquery.tooltip.js" type="text\/javascript"><\/script>\n\n<script type="text\/javascript">\n$Jtool = jQuery.noConflict();\n\n$Jtool(\n\tfunction() {\n\t\t$spnEle = $Jtool('.spnCustomTooltip');\n\t\t$spnEle.find('img').tooltip({showURL: false});\n\t\t$spnEle.mouseover(function() {\n\t\t\t$Jtool(this).find('img').addClass('helpButtonOn_cust');\n\t\t});\n\t\t$spnEle.mouseleave(function() {\n\t\t  $Jtool(this).find('img').removeClass('helpButtonOn_cust');\n\t\t});\n\t}\n);\n\n<\/script>\n\n<\/head>\n<body>\n\n<div id="main">\nSample\n<span class="spnCustomTooltip">\n\t\t<img src="s.gif" class="helpButton_cust" title='This is Sample Custom Tooltip \/ Helptext like Standard Salesforce Help Text'>\n\t\t<\/span>\n<\/div>\n\n<\/body>\n<\/html>\n<\/pre>\n
Download Salesforce Helptext like Tooltip using JQuery – Source Code<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
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. Download Salesforce Helptext like Tooltip using […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"jz_research_post":"","_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[26,9],"tags":[338,134,331,213],"class_list":["post-3134","post","type-post","status-publish","format-standard","hentry","category-web","category-salesforce","tag-web","tag-jquery","tag-salesforce","tag-visual"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack-related-posts":[{"id":2817,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/gantt-chart-in-salesforce-using-jquery-and-json\/","url_meta":{"origin":3134,"position":0},"title":"Gantt Chart in Salesforce using JQuery and JSON","author":"Jitendra","date":"April 18, 2012","format":false,"excerpt":"Tutorial and Example of creating the Gantt Chart in Salesforce using JQuery and JSON","rel":"","context":"In "Apex"","block_context":{"text":"Apex","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/apex\/"},"img":{"alt_text":"Gantt Chart in Salesforce","src":"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2012\/04\/Gantt-Chart-in-Salesforce.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2012\/04\/Gantt-Chart-in-Salesforce.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2012\/04\/Gantt-Chart-in-Salesforce.png?resize=525%2C300&ssl=1 1.5x"},"classes":[]},{"id":3347,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/ajax-based-autocomplete-component-in-salesforce-using-jquery-ui-and-json\/","url_meta":{"origin":3134,"position":1},"title":"AutoComplete Component in Visualforce using JQueryUI","author":"Jitendra","date":"June 28, 2013","format":false,"excerpt":"In this tutorial, I am going to explain very Simple AJAX and JSON based Auto Complete component with the help of JQuery UI. First I am assuming that you already have Static Resource of named \"AutoCompleteWithModal\"\u009d. This Static resource has all images, CSS and JQuery library needed to implement this\u2026","rel":"","context":"In "HTML"","block_context":{"text":"HTML","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/webtech\/web\/"},"img":{"alt_text":"JQuery UI and JSON based AJAX AutoComplete Component in Salesforce","src":"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2013\/06\/JQuery-UI-and-JSON-based-AJAX-AutoComplete-Component-in-Salesforce.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2013\/06\/JQuery-UI-and-JSON-based-AJAX-AutoComplete-Component-in-Salesforce.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2013\/06\/JQuery-UI-and-JSON-based-AJAX-AutoComplete-Component-in-Salesforce.png?resize=525%2C300&ssl=1 1.5x"},"classes":[]},{"id":3106,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/change-year-range-in-datepicker-salesforce\/","url_meta":{"origin":3134,"position":2},"title":"Change year range in Datepicker – Salesforce","author":"Jitendra","date":"September 20, 2012","format":false,"excerpt":"In Datepicker control of salesforce, most of the developers must have faced issue on year range for Datepicker control. We cannot configure the year range in standard date picker control. However, for a long time i am using a JQuery code to change the range of years in Datepicker and\u2026","rel":"","context":"In "Salesforce"","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"Year Range in Salesforce Date Picker","src":"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2012\/09\/Year-Range-in-Salesforce-Date-Picker.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":3355,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/jquery-based-raffle-in-salesforce\/","url_meta":{"origin":3134,"position":3},"title":"JQuery Based Raffle in Salesforce","author":"Jitendra","date":"June 29, 2013","format":false,"excerpt":"Recently i run into very interesting scenario where i had to randomly take name of few contacts. There are many ways to do it but I thought why not to implement this functionality in Salesforce with help of some Javascript? So i came up with this - JQuery based Raffle\u2026","rel":"","context":"In "Salesforce"","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"JQuery Based Raffle in Salesforce","src":"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2013\/06\/JQuery-Based-Raffle-in-Salesforce.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2013\/06\/JQuery-Based-Raffle-in-Salesforce.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2013\/06\/JQuery-Based-Raffle-in-Salesforce.png?resize=525%2C300&ssl=1 1.5x"},"classes":[]},{"id":3762,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/salesforce-rest-api-playground\/","url_meta":{"origin":3134,"position":4},"title":"Salesforce REST API Playground","author":"Jitendra Zaa","date":"February 25, 2014","format":false,"excerpt":"What is REST API ? In my words, Getting data from Other System or Same System using HTTP request is known as REST API. If you know, how website works, you know REST API. Before REST API, there was SOAP request which needed lots of configuration and very tightly coupled.\u2026","rel":"","context":"In "Salesforce"","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"REST API playground in Salesforce","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2014\/02\/REST-API-playground-in-Salesforce-1024x362.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2014\/02\/REST-API-playground-in-Salesforce-1024x362.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2014\/02\/REST-API-playground-in-Salesforce-1024x362.png?resize=525%2C300&ssl=1 1.5x"},"classes":[]},{"id":4618,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/most-frequently-used-code-snippets-for-salesforce-developers-faq-part-21\/","url_meta":{"origin":3134,"position":5},"title":"Salesforce Developers interview questions – Most commonly used code snippets – part 21","author":"Jitendra","date":"July 7, 2015","format":false,"excerpt":"Salesforce interview questions - Most frequently used Apex and visualforce code used by Salesforce developers like \"How to query and abort scheduled job using Apex\", \"Defining VF page as HTML5\", \"Visualforce page as JSON\" , \"Handling colon in element Id for Jquery\" , \"Chatter using Apex\" and many more.","rel":"","context":"In "Salesforce"","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/3134","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/comments?post=3134"}],"version-history":[{"count":0,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/3134\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/media?parent=3134"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/categories?post=3134"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/tags?post=3134"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}