How can I add a popup help text near a field in Accounts module in SugarVersion 7.6

Question

Hi, I want to add a pop-up help text to some fields in Accounts module

Like

Name : [_________] ?

?- represents a information icon

and on clicking the ? icon it should popup a help text

I'm using sugar version 7.6

Anoop Antony · Accepted Answer

Solution List of files to customize: custom/modules/Accounts/clients/base/views/record/record.php; custom/modules/Accounts/clients/base/views/record/record.hbs; custom/modules/Accounts/clients/base/views/record/record.js; custom/Extension/modules/Accounts/Ext/Language/en_us.lang.php; custom/themes/custom.less. So, firtst thing is add to our Name field some option (i.g. tooltip_content) which describe a tooltip. I prefer to add direct language label called TOOLTIP_CONTENT_STR. custom/modules/Accounts/clients/base/views/record/record.php 1 = > array ( 'name' = > 'name' , 'tooltip_content' = > 'TOOLTIP_CONTENT_STR' ) , Then we could add this language label with your own content to language file custom/Extension/modules/Accounts/Ext/Language/en_us.lang.php : $mod_strings = array ( // ... 'TOOLTIP_CONTENT_STR' = > 'Help Tooltip Text' ) ; Next step is add HBS where we'll check tooltip_content param and if it's true we add custom span tag which represent help icon ( custom/modules/Accounts/clients/base/views/record/record.hbs ): < div class = " headerpane " > ... < span class = " record-cell " data-type = " {{type}} " data-name = " {{name}} " > < span class = " table-cell-wrapper " > ... {{#if this.tooltip_content}} < span class = " cs-tooltip " > {{/if}} ... So, if we have span.cs-tooltip let's add a little bit of style to it ( custom/themes/custom.less ): .cs-tooltip { width : 30px ; height : 30px ; // By default span will be visible on Edit Mode display : none ; background-image : url() ; position : relative ; top : 10px ; } Obviously you can customize style of that span as you wish. And the last thing is to add controller ( custom/modules/Accounts/clients/base/views/record/record.js ) : ( { extendsFrom : 'AccountsRecordView' , events : { "mouseenter .cs-tooltip" : "showHelpTooltip" , "mouseleave .cs-tooltip" : "hideHelpTooltip" , } , initialize : function ( options ) { this . _super ( 'initialize' , [ options ] ) ; } , toggleEdit : function ( isEdit ) { this . _super ( 'toggleEdit' , [ isEdit ] ) ; this . toogleTooltipIcon ( isEdit ) ; } , toogleTooltipIcon : function ( isEdit ) { if ( isEdit ) { this . $el . find ( '.cs-tooltip' ) . css ( "display" , "inline-block" ) ; } else { this . $el . find ( '.cs-tooltip' ) . css ( "display" , "none" ) ; } } , showHelpTooltip : function ( ) { var content = app . lang . get ( 'TOOLTIP_CONTENT_STR' , this . module ) ; this . $el . find ( ".cs-tooltip" ) . popover ( { title : 'Help' , content : content , placement : 'bottom' } ) ; this . $el . find ( ".cs-tooltip" ) . popover ( 'show' ) ; } , hideHelpTooltip : function ( ) { this . $el . find ( ".cs-tooltip" ) . popover ( 'hide' ) ; } , } ) ; Pay attention: this implementation works only when your record in edit mode. If you don't need it just comment line 15 in record.js and replace display: none; to display: inline-block; in custom.less file. Finally just click on Repair And Rebuild.