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

Thank you for the reply!. 

I tried it on the name field, and i'm just a newbie to SugarCrm

So I extended  clients/base/fields/name/edit.hbs

and added a image next to Name field, 

and this is my codicone in custom/clients/base/fields/name/edit.hbs

<input type="text" name="{{name}}" value="{{value}}"{{#if def.len}} maxlength="{{def.len}}"{{/if}}{{#if def.placeholder}} placeholder="{{str def.placeholder this.model.module}}"{{/if}} class="inherit-width">
{{#unless hideHelp}}{{#if def.help}}<p class="help-block">{{str def.help module}}</p>{{/if}}{{/unless}}

// Link to the "help "

<img src="{{custom/themes/default/themes/default/images/icon_info.gif}}">

but it is not working, i'm not sure if it is the way to extend,?  Could you please be more specific on this, Like i said I a newbie on Sugar! 

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.

Hi guys,

You guys are really helpful . But i'm afraid i didn't get the exact output. But I managed to do what you gys suggested and got popovers. Let me give you a pictorial representation  of my question

So you can see, next to the name field , I have a  symbol, and when I hover my mouse pointer, I need to display a text in a popup window where it is written "his is custom text" (like a title property in html img tag) 

Please help.

Thank you,

Anoop

Hi guys,

You guys are really helpful . But i'm afraid i didn't get the exact output. But I managed to do what you gys suggested and got popovers. Let me give you a pictorial representation  of my question

So you can see, next to the name field , I have a   symbol, and when I hover my mouse pointer, I need to display a text in a popup window where it is written "his is custom text" (like a title property in html img tag) 

Please help.

Thank you,

Anoop

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.