cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
1619
Views
1
Helpful
1
Replies

NeXt tool tips (or lack of)

PAUL MELVIN
Level 1
Level 1

hi,

I have been experimenting with NeXt over the last couple of days and have a question about the tooltips (both for nodes and links)

I have a pen here... https://codepen.io/paulmelvin/pen/QMgpYO

I have dragged together a working config (I am no programmer ) and cannot get the tooltips to work as I want, I am trying to access the text based attributes but cannot seem to do it??

If I comment out

tooltipManagerConfig: { "nodeTooltipContentClass": 'MyNodeTooltip'}

I get the default and I see everything but if I try and use my code it goes nowhere, I would appreciate some guidance please.

On the not of the tool tips, how can I change the size of the box, is this possible, I would like some advice on control of size and data in the tool tip itself (fonts would also be good, different ones and colours?)

Thanks

Paul

1 Reply 1

greenpau
Level 1
Level 1

Hi, generally speaking a creation of a custom tooltip requires decent knowledge of Javascript and the frameworks associated with it. In general terms, you need to create a new tooltip object by extending Next UI "Component".

Cisco Next UI came out of OpenDaylight project. Here you have some examples how to extend components.  https://wiki.opendaylight.org/view/NeXt-UI-Toolkit-System-Test-Case#Test_Case

Search for "nx.define('ContactView', nx.ui.Component, {" on that page.

The "how" things would look is defined by the "view" of the component.

view: {

  content: [

  {

  tag: 'input',

  props: {

  'class': 'input-search',

  value: '{filterKey}',

  placeholder: 'Search...'

  }

  },

The content defines HTML payload. It is a list of dictionaries. Each object in the dictionary is an HTML element. In this case in would result in something like this.

<input class="input-search" placeholder="Search..." value="{filterKey}">

Regards,

Paul