Tooltip

[Frank68]

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.

[admin]

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

[Frank68]

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 ?

[Frank68]

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

[admin]

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);
}

[Frank68]

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?

[admin]

Scripting - Tools - Edit Custom JavaScript

[cekca]

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

[admin]

Replace this:

Code:

$(el).attr('data-name', obj.name);

With this:

Code:

$(el).attr('data-name', obj.name).removeClass('item-read-only');

[JoWo]

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.

[admin]

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

[JoWo]

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

[admin]

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

[fleeceable]

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;
}

[Novodk]

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?

[fleeceable]

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)

[Novodk]

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