java - JavaFX Tooltip - border color bug -


i have problem tooltips in javafx. illustration core of problem created new javafx project through intellij idea. root pane of project hbox alignment="center" , hbox contains 4 buttons (text: button a-d). every button has set tooltip text: sample tooltip a-b. through fxml file loading cascading styles saved in file named styles.css.

problem description: launch application , when hover mouse on first button, it's tooltip looks css file describes. when hovering on second button, right border of tooltip brighter. when hover mouse on third or fourth button, right red border of tooltip visible, rather can see mix of it's background (yellow) , border color. none of others borders doing that, right border. it's strange behavioral.

what tried: tried change font family, font size , padding.

my question: causes issue? have got solution problem? , have got trouble too?

screenshot shows issue described

screenshot shows issue described

*mouse cursor hovering on button c

main.java

package sample;  import javafx.application.application; import javafx.fxml.fxmlloader; import javafx.scene.parent; import javafx.scene.scene; import javafx.stage.stage;  public class main extends application {      @override     public void start(stage primarystage) throws exception{         parent root = fxmlloader.load(getclass().getresource("sample.fxml"));         primarystage.settitle("hello world");         primarystage.setscene(new scene(root, 300, 275));         primarystage.show();     }       public static void main(string[] args) {         launch(args);     } } 

controller.java

package sample;  public class controller { } 

sample.fxml

<?xml version="1.0" encoding="utf-8"?>  <?import java.lang.*?> <?import javafx.scene.control.*?> <?import javafx.scene.layout.*?>  <hbox alignment="center" spacing="10.0" stylesheets="@styles.css" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1">    <children>       <button mnemonicparsing="false" text="button a">          <tooltip>             <tooltip text="sample tooltip a" />          </tooltip>       </button>       <button mnemonicparsing="false" text="button b">          <tooltip>             <tooltip text="sample tooltip b" />          </tooltip>       </button>       <button mnemonicparsing="false" text="button c">          <tooltip>             <tooltip text="sample tooltip c" />          </tooltip>       </button>       <button mnemonicparsing="false" text="button d">          <tooltip>             <tooltip text="sample tooltip d" />          </tooltip>       </button>    </children> </hbox> 

styles.css

.tooltip{ -fx-text-fill:              black; -fx-background-radius:      0px; -fx-background-color:       yellow; -fx-effect:                 null; -fx-border-width:           1px; -fx-border-color:           red;} 

ps: sorry english. if it's bug of javafx, it's acute resolve problem!

i've managed reproduce issues, i've been trying find out reason weird/buggy behaviour.

first of all, thought had length of text, being "c" has different length "a".

for debugging purposes, i've created scene in code.

@override public void start(stage primarystage) throws ioexception {     button ba=new button("button a");     tooltip ta=new tooltip("sample tooltip a");     ta.widthproperty().addlistener((obs,b,b1)->system.out.println("a: "+ta.getwidth()));     ba.settooltip(ta);      button bb=new button("button b");     tooltip tb=new tooltip("sample tooltip b");     tb.widthproperty().addlistener((obs,b,b1)->system.out.println("b: "+tb.getwidth()));     bb.settooltip(tb);      button bc=new button("button c");     tooltip tc=new tooltip("sample tooltip c");     tc.widthproperty().addlistener((obs,b,b1)->system.out.println("c: "+tc.getwidth()));     bc.settooltip(tc);      button bd=new button("button d");     tooltip td=new tooltip("sample tooltip d");     td.widthproperty().addlistener((obs,b,b1)->system.out.println("d: "+td.getwidth()));     bd.settooltip(td);      hbox root =new hbox(10,ba,bb,bc,bd);     scene scene = new scene(root, 300, 250);     scene.getstylesheets().add(getclass().getresource("root.css").toexternalform());     primarystage.setscene(scene);     primarystage.show();  } 

where i've added listener changes in width of tooltips.

and output:

a: 18.0 a: 0.0 a: 95.16523742675781 a: 95.0 a: 95.16523742675781 a: 95.0  b: 18.0 b: 0.0 b: 94.43310546875 b: 94.0 b: 94.43310546875 b: 94.0  c: 18.0 c: 0.0 c: 94.9012680053711 c: 94.0 c: 94.9012680053711 c: 94.0  d: 18.0 d: 0.0 d: 95.73799133300781 d: 95.0 d: 95.73799133300781 d: 95.0 

do notice every tooltip real width, , it's truncated?

this means tooltip 'a' truncated few, 95.17 95, , there's no visible indication of this, 'c' truncated 94.90 94, 1 pixel, that's why right border not visible!

i can't tell reason why behaviour. can try solve it.

one simple solution providing enough space text. in fxml file solve problem:

<tooltip prefwidth="100" text="sample tooltip a" /> ... <tooltip prefwidth="100" text="sample tooltip c" /> ... 

a more exact solution setting required width every tooltip: if round length of text , add 20px padding, tooltip 1 pixel wider , borders visible every button tooltip.

this how can (padding , border hardcoded sake of simplicity):

private final double padding = 9d; private final double border  = 1d;  private void settooltipwidth(tooltip tooltip){     if(tooltip==null ||          tooltip.getscene()==null ||          tooltip.getscene().getroot()==null){         return;     }     text text=(text)tooltip.getscene().getroot().lookup(".text");     if(text==null || text.getlayoutbounds().getwidth()==0){         return;     }     double width=2d*(padding+border)+math.ceil(text.getlayoutbounds().getwidth());     tooltip.setprefwidth(width); } 

and now, every button:

tc.widthproperty().addlistener((obs,b,b1)->settooltipwidth(tc)); 

if print again width changes, show on button "c":

c: 18.0 c: 0.0 c: 94.9012680053711 c: 94.0 c: 94.9012680053711 c: 95.0 

and tooltip displayed correctly:

tooltip


Comments

Popular posts from this blog

javascript - gulp-nodemon - nodejs restart after file change - Error: listen EADDRINUSE events.js:85 -

Fatal Python error: Py_Initialize: unable to load the file system codec. ImportError: No module named 'encodings' -

javascript - oscilloscope of speaker input stops rendering after a few seconds -