This forum uses cookies
This forum makes use of cookies to store your login information if you are registered, and your last visit if you are not. Cookies are small text documents stored on your computer; the cookies set by this forum can only be used on this website and pose no security risk. Cookies on this forum also track the specific topics you have read and when you last read them. Please confirm that you accept these cookies being set.

Tooltip
#21
(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.
Reply
#22
You need to add this text there:
tooltip tooltip-1
Reply
#23
(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 ?
Reply
#24
(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
Reply
#25
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);
}
Reply
#26
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?
Reply
#27
Scripting - Tools - Edit Custom JavaScript
Reply
#28
Hi, there is a way to use the tooltip with object name if the object in the user interface is 'read-only' ???
Reply
#29
Replace this:
Code:
$(el).attr('data-name', obj.name);
With this:
Code:
$(el).attr('data-name', obj.name).removeClass('item-read-only');
Reply
#30
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.
Reply
#31
This feature is not supported on older firmwares. Make sure you are running the latest version.
Reply
#32
(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
Reply
#33
You will have to wait for the next firmware update then.
Reply
#34
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;
}

Attached Files Thumbnail(s)
   
Reply
#35
(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?
Reply
#36
(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)

Attached Files Thumbnail(s)
                       
   
Reply
#37
(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
Reply


Forum Jump: