topic Re: Need to customize default link tooltip in Tools

Need to customize default link tooltip

aaikepae — Tue, 03 Feb 2015 22:13:38 GMT

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

Re: Need to customize default link tooltip

aaikepae — Tue, 03 Feb 2015 22:20:36 GMT

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}'

Re: Need to customize default link tooltip

ssamel — Thu, 05 Feb 2015 09:57:26 GMT

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

Re: Need to customize default link tooltip

aaikepae — Fri, 06 Feb 2015 02:27:17 GMT

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}'

Re: Need to customize default link tooltip

ssamel — Fri, 06 Feb 2015 11:52:19 GMT

Thanks Abu.

Can you please explain what convertBack function does?

Regards,

Sachin

Re: Need to customize default link tooltip

ssamel — Tue, 10 Feb 2015 08:19:56 GMT

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

Re: Need to customize default link tooltip

aaikepae — Fri, 13 Feb 2015 00:06:56 GMT

Hi Sachin,

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

Re: Need to customize default link tooltip

aaikepae — Fri, 13 Feb 2015 00:09:34 GMT

Hi Sachin,

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