I have been seen the blog, there is no tooltip that looks like bubble.
The round yellow tooltp in the blog looks like a bubble to me. I guess I don't understand what you are asking.
If you want an answer that closer matches what you want, you need to do more work. Post the CSS you have tried so far for your solution even if it's wrong. Post a link to an image which is a picture of exactly what you want. Describe in detail what the difficulty you have an achieving that image is.
I am sorry that I did not describe my problem clearly. Now I give some links to images that illustrate the tooltip's form and position relative to node that I want to achieve.
the default JavaFX tooltip is like that:
The three customized tooltips that I wish to realize:
Thanks for your help !
1 person found this helpful
Though you can alter the look through css or applying a graphic to the tooltip in code, a standard tooltip does not feature any positioning logic like you have in your sample images.
If positioning the tooltip aynwhere except exactly under the mouse pointer is important, you might want to consider a different approach such as:
a) An overlay pane, simlar to the Decoration feature of Jide's JavaFX components:
b) A ContextMenu with a graphic set containing your stylized bubble:
You could use something like an svg path (or a -fx-shape region attribute) to render the bubble shape:
I won't provide the SVGPath string necessary for your shapes.
You could investigate using an svg drawing tool like Inkscape to create the required path string.
The simple triangular callout form for your bubble is going to be simpler to create than the cloud-like thought bubble, so, if I were you, I'd start with the simple callout first.
Use the image as background will cause aliasing when the content of tooltip changes size, and also the same for SVG path shape.
Here the image link:
It is a .9.png format, which enables a stretch without aliasing by using NinePatch tech. How to realize that effect in JavaFX. I saw by setting -fx-border-image-source there is -fx-border-slice, but it allows only the division of 9 parts for the image. The link image allows several as needed parts stretchable and others non-stretchable.
So as shown in the linked image, the small triangular part in middle will not be stretched and thus keep its size without aliasing.
1 person found this helpful
> stretch without aliasing by using NinePatch tech. How to realize that effect in JavaFX.
That is a very interesting question, to which I don't have a solution at this time.
You may want to create a separate topic for just this question alone as the topic seems more generally useful and applicable than "How to style the tooltip?"
A new topic has been created, thanks.