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

You would simply create a custom field type for any fields that you need to add this to.  This is done from the client/base/fields.  The link below goes over all of it. 

For example, if you wanted this on name field you could extend the file clients/base/fields/name/edit.hbs

http://support.sugarcrm.com/Documentation/Sugar_Developer/Sugar_Developer_Guide_7.5/UI_Model/Fields/Examples/Creating_Cu… 

Let me know if you have any questions.

Hi, Anoop Antony!
Let's say you need to set help popup on the record view. So you should to customize several files (for Accounts module):

• record.php;
• record.js.

In record.php add property:

'css_class' => 'help-class'

And in the controller record.js add:

// Some code before
events: {
    "mouseenter .help-class" : "showHelpTooltip",
    "mouseleave .help-class" : "hideHelpTooltip",
},

// Define method on mouse on the field event
showHelpTooltip: function() {
    // You can get text for help info from language file or hard code here
    // var content = app.lang.get('LBL_SOME_HELP_TEXT', this.module);
    var content = 'Help Text Is Here';
    this.$el.find(".help-class").popover({title: 'Help', content: content, placement: 'left'});    
    this.$el.find(".help-class").popover('show');
},

// Define method on mouse leave from field event
hideHelpTooltip: function() {
    this.$el.find(".help-class").popover('hide');   
},

// Some code after

I hope you'll find it useful.

Any help guys?

Any help guys?

Anoop Antony, hi!
I have solution for you, but it's complicated to discuss here. Maybe we can email?

Hi @Maksim Nesterenko

Thank@ you for the reply.

Sure. We can email. My email ID is anup347@gmail.com

Thanks

Anoop

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">
                ...
            </span>
            {{#if this.tooltip_content}}
                <span class="cs-tooltip"></span>
            {{/if}}
        </span>
    ...
</div>

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(<PATH_TO_ICON>);
    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.