This discussion is archived
3 Replies Latest reply: Nov 6, 2012 6:16 AM by James_D RSS

Positioning of Tooltips

972489 Newbie
Currently Being Moderated
Hi,

I'd like to position a tooltips on the right side of a button. At the moment, tooltips are AFAIK automatically positioned below which will lead to usability problems if there is another clickable node that resides directly below.

Please see [http://s12.postimage.org/e956sblcp/screenshot.png] for a better understanding.

As a little extra: is it possible to remove the graphic effect on the bottom right corner of the tooltip?

//Update
For manipulating the corner I found -fx-shape in [http://docs.oracle.com/javafx/2/api/javafx/scene/doc-files/cssref.html]. Sadly, I'm not experienced in SVG. Anybody can help?
.page-corner {
    -fx-shape: " ";
}
Thanks for your answers.

Edited by: 969486 on 05.11.2012 03:52

Edited by: 969486 on 05.11.2012 03:54
  • 1. Re: Positioning of Tooltips
    David Grieve Pro
    Currently Being Moderated
    Try this to turn off the page corner.
    .page-corner {
        -fx-shape: null;
    }
    The code bases the popup location on the mouse location. You can override the show methods from PopupWindow to have the tooltip show up where you want it.
            Tooltip t = new Tooltip("My Tooltip") {
               @Override
                public void show(Node ownerNode, double screenX, double screenY) {
                    super.show(ownerNode, screenX, screenY);
                }
    
               @Override
                public void show(Window ownerWindow, double screenX, double screenY) {
                    super.show(ownerWindow, screenX, screenY);
                }            
            };
  • 2. Re: Positioning of Tooltips
    972489 Newbie
    Currently Being Moderated
    Thanks for your fast answer, David!

    Question one is answered.

    Sadly, setting
    -fx-shape: null;
    still shows the bottom-right image at the tooltip corner.

    Example:
    @Override
    public void start(Stage stage) throws Exception {
         AnchorPane anchorPane = new AnchorPane();
         anchorPane.getChildren().add(
              ButtonBuilder.create()
                   .text("hover")
                   .tooltip(
                        TooltipBuilder.create()
                             .style("-fx-shape: null;")
                             .text("Tooltip")
                             .build()
                   )
                   .build()
         );
    
         Scene scene = new Scene(anchorPane);
         stage.setScene(scene);
         stage.show();
    }
    What am I missing?
  • 3. Re: Positioning of Tooltips
    James_D Guru
    Currently Being Moderated
    You've applied the style rule -fx-shape:null to the tooltip; you need to apply it to the child node of the tooltip with class .page-corner, as in David's css code.

    This is going to be way easier with an external style sheet (inline styles are really pretty limited in their uses). You might be able to get away with the following, which I haven't tested:
    for (Node n : anchorPane.lookupAll(".page-corner")) {
      n.setStyle("-fx-shape: null");
    }

Legend

  • Correct Answers - 10 points
  • Helpful Answers - 5 points