Need to customize default link tooltip

[aaikepae]

Hi,

I want to display customize tooltip on link.

I followed the same code as posted on http://xq.cisco.com/next/NeXtSite/demos.html#Tooltip/link

However, it is not working in my case.

Below is code snipped:

nx.define('MyLinkTooltip', nx.ui.Component, {

                properties: {

                                link: {},

                                topology: {}

                },

                view: {

                                content: [{

                                                tag: 'p',

                                                content: [{

                                                                tag: 'label',

                                                                content: 'Source:'

                                                }, {

                                                                tag: 'span',

                                                                content: '{#link.model.source}'

                                                }]

                                }, {

                                                tag: 'p',

                                                content: [{

                                                                tag: 'label',

                                                                content: 'Target:'

                                                }, {

                                                                tag: 'span',

                                                                content: '{#link.model.target}'

                                                }]

                                }, {

                                                tag: 'p',

                                                content: [{

                                                                tag: 'label',

                                                                content: 'Status:'

                                                }, {

                                                                tag: 'span',

                                                                content: '{#link.model.status}'

                                                }]

                                }]

                }

});

In porps parameter put the following code:

tooltipManagerConfig: {

                nodeTooltipContentClass: 'MyNodeTooltip',

                linkTooltipContentClass: 'MyLinkTooltip'

}

Please do let me know,where I want to do the changes to implement the link tooltip.

Regards,

Sachin Samel

[aaikepae]

This two syntax cause error.

content: '{#link.model.source}'

Change to :

content: '{#link.model.source.id}'

Same as target

content: '{#link.model.target}'

chang to:

content: '{#link.model.target.id}'

[ssamel]

Yes Abu. That solved my problem.

Another thing I noticed that, for boolean value false, it is not showing me any data. Can we handle it in a function which will return boolean values in string format?

e.g. content: function(){

                         //code to convert boolean to string format.

                         return str;

                         }

I tried like above code, but it was showing me the entire function definition in the popover.

Thanks,

Sachin

[aaikepae]

you can use converter to process data.

define a converter

var myConverter = {
          convert: function(value) {
               return value ? 'true' : 'false'
          },
          convertBack: function(value) {
               return value == 'true';
          }
}

and use it

content: '{#link.model.status,converter=myConverter}'

[ssamel]

Thanks Abu.

Can you please explain what convertBack function does?

Regards,

Sachin

[ssamel]

Hi Abu,

I tried the converter function but it is not working.

It is not returning me any value if the value is false.

I tried to debug the converter function calling by putting console.log(value), but nothing is displayed in console.

Regards,

Sachin

[aaikepae]

Hi Sachin,

this is  converter's syntax : 'key:{model,converter=converterName}'  , so if you can paste you code here, i can help on debug

[aaikepae]

Hi Sachin,

We use two-way binding for View and Model, so 'convert' mean from Model-> View and 'convertBack' means from View -> Model