+- Logic Machine Forum (https://forum.logicmachine.net)
+-- Forum: LogicMachine eco-system (https://forum.logicmachine.net/forumdisplay.php?fid=1)
+--- Forum: Visualization (https://forum.logicmachine.net/forumdisplay.php?fid=9)
+--- Thread: Tooltip (/showthread.php?tid=599)
Pages:
1
2
Tooltip - cekca - 07.02.2017
Hi, is possible to add a tooltip to a link object....???
RE: Tooltip - Thomas - 07.02.2017
Please, not only for links but for normal objects too. It would be a great improvement for "user" visualisations.
RE: Tooltip - cekca - 13.02.2017
No solution...???
RE: Tooltip - buuuudzik - 13.02.2017
(13.02.2017, 15:16)cekca Wrote: No solution...???
If this is only for a few points you can prepare widgets and open appropriate by clicking to the value.
RE: Tooltip - Erwin van der Zwart - 13.02.2017
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
RE: Tooltip - admin - 14.02.2017
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";
}RE: Tooltip - Mirco - 13.11.2019
(14.02.2017, 07:45)admin Wrote: 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
RE: Tooltip - Daniel - 13.11.2019
It works, only you will see it in the final visu not in editor.
RE: Tooltip - Mirco - 13.11.2019
I don't see it even in the final visu..
RE: Tooltip - Daniel - 13.11.2019
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?
RE: Tooltip - Mirco - 13.11.2019
yes I have done it
RE: Tooltip - Daniel - 13.11.2019
Send me your backup to PM, use wetransfer.com or similar
RE: Tooltip - Mirco - 13.11.2019
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"
RE: Tooltip - Daniel - 13.11.2019
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.
RE: Tooltip - Mirco - 13.11.2019
I have 400 sensors that are read only, it is not a great work around
RE: Tooltip - Mirco - 14.11.2019
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;
}RE: Tooltip - Mirco - 14.11.2019
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
RE: Tooltip - admin - 14.11.2019
See this: https://stackoverflow.com/questions/10495243/how-change-content-value-of-pseudo-before-element-by-javascript/42000085#42000085
RE: Tooltip - Frank68 - 30.06.2020
(13.02.2017, 23:34)Erwin van der Zwart Wrote: 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
RE: Tooltip - Erwin van der Zwart - 30.06.2020
Hi,
There is a css section on the graphics tab.
BR,
Erwin