Want to display customize tool tip on link. Followed the same code as posted on http://xq.cisco.com/next/NeXtSite/demos.html#Tooltip/link
However, it is not working. 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 added the following code:
tooltipManagerConfig: {
nodeTooltipContentClass: 'MyNodeTooltip',
linkTooltipContentClass: 'MyLinkTooltip'
}
Want to know what changes need to be done inorder to implement the link tooltip.
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}'
- 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;
}
- Tried like above code, but it was showing me the entire function definition in the popover.
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}'
Tried the converter function but it is not working. It is not returning me any value if the value is false. Tried to debug the converter function calling by putting console.log(value), but nothing is displayed in console.
This is converter's syntax : 'key:{model,converter=converterName}'
Comments
0 comments
Please sign in to leave a comment.