Logic Machine Forum
Tooltip - Printable Version

+- 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

RE: Tooltip - Frank68 - 30.06.2020

(30.06.2020, 06:26)Erwin van der Zwart Wrote: Hi,

There is a css section on the graphics tab.

BR,

Erwin

Ok I have add code to CSS , but nothing , in additiona class wath i need write tootltip ??


what should I write here.

RE: Tooltip - admin - 30.06.2020

You need to add this text there:
tooltip tooltip-1

RE: Tooltip - Frank68 - 01.07.2020

(30.06.2020, 11:49)admin Wrote: You need to add this text there:
tooltip tooltip-1
tank's is possible set the text of tooltip to name of object? in CSS is possible get the name ?

RE: Tooltip - Frank68 - 02.07.2020

(30.06.2020, 11:49)admin Wrote: You need to add this text there:
tooltip tooltip-1
OK

I tried to change the text dynamically, you can use the custom name or the object description on which the mouse passes as text

I searched all the forum posts and found nothing

Tank's

RE: Tooltip - admin - 02.07.2020

Custom name cannot be used but you can use object name like this. All elements that require a tooltip must have additional class set to tooltip
Custom JavaScript:
Code:
$(function(){
  $('.tooltip').each(function(_, el) {
    var addr = $(el).data('object');
    if (addr) {
      var obj = grp.find(addr);
      if (obj && obj.name) {
        $(el).attr('data-name', obj.name);
      }
    }
  });
});

Custom CSS:
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;
  content: attr(data-name);
}


RE: Tooltip - Frank68 - 02.07.2020

hi
 I modified the css as suggested
but when i try to insert the java code in a script i have an error in what type of script should i insert it?

RE: Tooltip - admin - 02.07.2020

Scripting - Tools - Edit Custom JavaScript

RE: Tooltip - cekca - 11.01.2021

Hi, there is a way to use the tooltip with object name if the object in the user interface is 'read-only' ???

RE: Tooltip - admin - 12.01.2021

Replace this:
Code:
$(el).attr('data-name', obj.name);
With this:
Code:
$(el).attr('data-name', obj.name).removeClass('item-read-only');


RE: Tooltip - JoWo - 18.04.2023

Hello everyone,

I know the thread is bit old but maybe someone can still help me.

My problem:
I added the custom javascript and custom css like this description said
Now on the Logicmachine, where I tested the visu, everything works fine.
But on the Spacelynk, in the productive environment, it doesn´t work.

Also on the spacelynk there are no attributes in the HTML-Code like "data-object" or "data-name".

If anybody can help me i´m very pleased.

RE: Tooltip - admin - 19.04.2023

This feature is not supported on older firmwares. Make sure you are running the latest version.

RE: Tooltip - JoWo - 19.04.2023

(19.04.2023, 08:21)admin Wrote: This feature is not supported on older firmwares. Make sure you are running the latest version.

thanks for the fast reply.

the firmwares are up to date.

on LM is SW: 20230307
on Spacelynk SW: 2.8.0

RE: Tooltip - admin - 20.04.2023

You will have to wait for the next firmware update then.

RE: Tooltip - fleeceable - 30.07.2023

Hi!

I have a little problem with tooltip. 
Have quite many buttons and some tooltips gonna be behind other button.
How it's possible to show tooltip top of any element?
Tried to use z-index : 999 on  .usermode .tooltip:hover:before section but no luck.

CSS:
Code:
.usermode .tooltip:before {
  display: none;
  position: absolute;
  top: -30px;
  height: 20px;
  line-height: 20px;
  left: 0;
  background-color: #2E2E2E;
  padding: 2px 6px;
  border-radius: 3px;
}


.usermode .tooltip:hover:before {
  display: block;
  content: attr(data-name);
  position:absolute;
  top: 0;
  left: 0;
  }

EDIT:
Added additional code worked for me:
Code:
.usermode .tooltip:hover {
  z-index:555555 !important;
}


RE: Tooltip - Novodk - 30.07.2023

(30.07.2023, 11:21)fleeceable Wrote: Hi!

I have a little problem with tooltip. 
Have quite many buttons and some tooltips gonna be behind other button.
How it's possible to show tooltip top of any element?
Tried to use z-index : 999 on  .usermode .tooltip:hover:before section but no luck.

CSS:
Code:
.usermode .tooltip:before {
  display: none;
  position: absolute;
  top: -30px;
  height: 20px;
  line-height: 20px;
  left: 0;
  background-color: #2E2E2E;
  padding: 2px 6px;
  border-radius: 3px;
}


.usermode .tooltip:hover:before {
  display: block;
  content: attr(data-name);
  position:absolute;
  top: 0;
  left: 0;
  }

EDIT:
Added additional code worked for me:
Code:
.usermode .tooltip:hover {
  z-index:555555 !important;
}
Do you mind sharing where you got your icons from?

RE: Tooltip - fleeceable - 30.07.2023

(30.07.2023, 14:04)Novodk Wrote:
(30.07.2023, 11:21)fleeceable Wrote: Hi!

I have a little problem with tooltip. 
Have quite many buttons and some tooltips gonna be behind other button.
How it's possible to show tooltip top of any element?
Tried to use z-index : 999 on  .usermode .tooltip:hover:before section but no luck.

CSS:
Code:
.usermode .tooltip:before {
  display: none;
  position: absolute;
  top: -30px;
  height: 20px;
  line-height: 20px;
  left: 0;
  background-color: #2E2E2E;
  padding: 2px 6px;
  border-radius: 3px;
}


.usermode .tooltip:hover:before {
  display: block;
  content: attr(data-name);
  position:absolute;
  top: 0;
  left: 0;
  }

EDIT:
Added additional code worked for me:
Code:
.usermode .tooltip:hover {
  z-index:555555 !important;
}
Do you mind sharing where you got your icons from?

I usually create icons by myself. I'm gonna add some to here. Feel free to use them.
(Right click -> Open image in new tab -> Right click -> Save image as)

RE: Tooltip - Novodk - 31.07.2023

(30.07.2023, 20:49)fleeceable Wrote:
(30.07.2023, 14:04)Novodk Wrote:
(30.07.2023, 11:21)fleeceable Wrote: Hi!

I have a little problem with tooltip. 
Have quite many buttons and some tooltips gonna be behind other button.
How it's possible to show tooltip top of any element?
Tried to use z-index : 999 on  .usermode .tooltip:hover:before section but no luck.

CSS:
Code:
.usermode .tooltip:before {
  display: none;
  position: absolute;
  top: -30px;
  height: 20px;
  line-height: 20px;
  left: 0;
  background-color: #2E2E2E;
  padding: 2px 6px;
  border-radius: 3px;
}


.usermode .tooltip:hover:before {
  display: block;
  content: attr(data-name);
  position:absolute;
  top: 0;
  left: 0;
  }

EDIT:
Added additional code worked for me:
Code:
.usermode .tooltip:hover {
  z-index:555555 !important;
}
Do you mind sharing where you got your icons from?

I usually create icons by myself. I'm gonna add some to here. Feel free to use them.
(Right click -> Open image in new tab -> Right click -> Save image as)
Thank you so much, they are very beautiful.
I have been looking for something like this for a project for ages Smile