Tooltip

[cekca]

Hi, is possible to add a tooltip to a link object....???

[Thomas]

Please, not only for links but for normal objects too. It would be a great improvement for "user" visualisations.

[cekca]

No solution...???

[buuuudzik]

No solution...???

If this is only for a few points you can prepare widgets and open appropriate by clicking to the value.

[Erwin van der Zwart]

Hi,

What you could do is use the normal text objects and give it a custom class and css to hide it by default. (and optional a background with rounded corners by css)

Then add a custom css class to your object and some custom javascript that detects a hover on the object and toggle the class on the (or group of) text object(s). 

This way you can have a tooltip effect.

I don't see any other easier way then this..

BR,

Erwin

[admin]

Add two classes to the visualization element that you want to have a tooltip: tooltip tooltip-1
Common tooltip class provides the tooltip element itself, while second class (tooltip-1) specifies the tooltip text

Custom CSS, adjust styles and text as needed:

Code:

.usermode .tooltip:before {
  display: none;
  position: absolute;
  top: -30px;
  height: 20px;
  line-height: 20px;
  left: 0;
  background-color: #eee;
  padding: 2px 6px;
  border-radius: 3px;
}
.usermode .tooltip:hover:before {
    display: block;
}
.usermode .tooltip-1:before {
  content: "My custom tooltip";
}

[Mirco]

Add two classes to the visualization element that you want to have a tooltip: tooltip tooltip-1
Common tooltip class provides the tooltip element itself, while second class (tooltip-1) specifies the tooltip text

Custom CSS, adjust styles and text as needed:

Code:

.usermode .tooltip:before {
  display: none;
  position: absolute;
  top: -30px;
  height: 20px;
  line-height: 20px;
  left: 0;
  background-color: #eee;
  padding: 2px 6px;
  border-radius: 3px;
}
.usermode .tooltip:hover:before {
    display: block;
}
.usermode .tooltip-1:before {
  content: "My custom tooltip";
}

Hi Admin, I have tryed this solution, but it doesn't work
Can you explain it better?
Thanks

[Daniel]

It works, only you will see it in the final visu not in editor.

[Mirco]

I don't see it even in the final visu..

[Daniel]

As the instructions says add the two classes to Additional class of visu element tooltip tooltip-1 and then paste the code to additional css. Have you done all this?

[Mirco]

yes I have done it

[Daniel]

Send me your backup to PM, use wetransfer.com or similar

[Mirco]

ok I found the problem.. if my element is "read-only" the tooltip doesn't work.. I need it to work even if my element is "read-only"

[Daniel]

hm. I don't think it will work as when element is read only there is no 'hover' on this element.

---

As a work around, you can add invisible image and place it under your object. Attach tooltip to the image and it will work.

[Mirco]

I have 400 sensors that are read only, it is not a great work around

[Mirco]

I have found a solution more elegant and simple for using tooltip with elements that are "read-only".




You have to add only those lines:

Code:

.tooltip > div > img {
  pointer-events: auto;
}

[Mirco]

Is there a way to change the text via javascript?
because this code doesn't work

Code:

$(".tooltip").mouseover(function(){
    $(".usermode .tooltip-1:before").css("content", "test");
});

someone can help me?

Thanks,
Mirco

[admin]

See this: https://stackoverflow.com/questions/1049...5#42000085

[Frank68]

Hi,

I have try but not found where put the class for object , is possible have one example ?
I have see where set class in the object baut non wher insert the class code for tooltip .

thank's

[Erwin van der Zwart]

Hi,

There is a css section on the graphics tab.

BR,

Erwin