CODEWITHSUNDEEP
vis.jsgraph-visualizationvis.js-network
IamGrooot
IamGrooot

Reputation: 1040

vis network node tooltip note showing

I have added title field for node. As per vis.js documentation it should display tooltip on hover of node.

I can see vis-tooltip div in inspect element. But its visiblity is hidden. In vis.js documnetation example I saw popup.css file getting applied to vis-tooltip class. But I don't see it in my application

I have following properties for nodes in options. Do I need to add anything ?

 nodes: {
        title: 'hover',
        shape: 'dot',
        chosen: true,
        color: {
            highlight: {
              border: '#2B7CE9',
              background: '#fff'
          },
          hover: {
            border: '#2B7CE9',
            background: '#D2E5FF'
          }
        },
        font: {
          size: 9
        },
        borderWidth: 2
      }

sample node data

{id: 9264, type: "db", title: "node-text", resource: "dascsvd", region: "xxxxx"}

Upvotes: 0

Views: 3216

Answers (1)

IamGrooot
IamGrooot

Reputation: 1040

For vis-tooltip class css needs to be applied dynamically on hover. Which wasn't happening in my case. That css was coming frpm popup.css file. I copied those css and added to my code. Now its working fine as expected

::ng-deep div.vis-tooltip {
  position: absolute;
  visibility: hidden;
  padding: 5px;
  white-space: nowrap;
  color: #000000;
  background-color: #f5f4ed;

  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  border: 1px solid #808074;

  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
  pointer-events: none;

  z-index: 5;
}

Upvotes: 2

Related Questions