3 Replies Latest reply: Nov 6, 2012 8:16 AM by James_D RSS

    Positioning of Tooltips

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