原文：JavaFx Tooltip懸浮提示使用及自定義 | Stars-One的雜貨小窩
本篇是基於TornadoFx框架對Tooltip組件進行講解,使用Kotlin語言,和傳統Java使用有所區別,僅供參考
介紹
鼠標懸浮在某個控件，彈出提示，效果如下：
使用
Tooltip一般是和某個節點控件綁定使用,這里的節點控件只能是control中的包javafx.scene.control,具體可以點擊地址跳轉查看
除此之外,還提供了另外一個方法,可以讓tooltip在當前窗口的指定位置顯示,比較麻煩的就是需要自己去計算偏移量
Tooltip.install(control,tooltip)綁定使用tooltip.show(window,x,y)指定窗口和偏移量顯示
PS: tooltip指的是Tooltip的對象,可以直接新建
Java中使用
簡單地提下Java中的使用
//control是某個控件
Label label = new Lable("hello")
Tooltip.install(label, new Tooltip("鼠標懸浮顯示的文字"));
TornadoFx中使用
class TestView : View("My View") {
override val root = vbox {
label("hello") {
tooltip = tooltip("這是一段解釋說明")
}
}
}
自定義
本章節包括對tooltip的樣式定制化以及指定窗口顯示
樣式自定義
默認的黑底白字有些丑,有時候感覺看到不太清楚,我們可以對其樣式進行調整,調整為白底黑字,代碼如下:
label("hello") {
tooltip = tooltip("這是一段解釋說明"){
style {
backgroundColor += c("white")
textFill = c("black")
}
}
}
效果如下圖所示:
從上面的代碼其實就是修改了tooltip內部的樣式就可以了,舉一反三,相關屬性或樣式修改即可對tooltip的樣式進行調整
label("hello") {
tooltip = tooltip {
prefWidth = 200.0
textAlignment = TextAlignment.LEFT
isWrapText = true
style {
backgroundColor += c("white")
textFill = c("black")
}
isAutoHide = false
text = "這是一段長文本說明長文本說明這是一段長文本說明長文本說明"
}
}
效果如下:
指定窗口顯示
上面也是解釋過,Tooltip有兩種使用方法,一種是與控件進行綁定,另外則是指定窗口來使用,那么上面情況下是需要使用指定窗口這種方法呢?
答案很明確,有些控件並不支持直接安裝tooltip的,那我們想要實現懸浮彈窗只能使用這個指定窗口顯示的方法了
我們以Text為例子,再想上面的label那樣寫,tooltip會直接爆紅的,原因是Text並不是control包中的組件
text("hello") {
//注意這里,是聲明了變量
val tooltip = tooltip {
prefWidth = 200.0
textAlignment = TextAlignment.LEFT
isWrapText = true
style {
backgroundColor += c("white")
textFill = c("black")
}
isAutoHide = false
text = "這是一段長文本說明長文本說明這是一段長文本說明長文本說明這是一段長文本說明長文本說明這是一段長文本說明長文本說明"
}
//監聽鼠標划入事件
setOnMouseEntered {
tooltip.show(currentWindow)
}
//監聽鼠標划出事件
setOnMouseExited {
ooltip.hide()
}
}
上述代碼對Text控件設置了鼠標划入和划出事件的監聽,當鼠標划入的時候,就顯示tooltip;當鼠標划出的時候,就將tooltip進行隱藏
滑動到圖標
首先我們來看動態效果
tooltip自動移動位置有點奇怪,不過沒找到具體原因,湊合着用了..
代碼也是比較簡單,只是在上面鼠標划入和划出的監聽基礎上加了修改圖標的操作,不過感覺有些卡頓,圖片寬高最好不要設置太大
圖標是自己去iconfont-阿里巴巴矢量圖標庫生成了,就簡單的改了下顏色,就有了兩張圖片
PS:實踐的時候,注意下圖片的路徑,如下圖
代碼如下:
imageview("/img/que_normal.png") {
fitWidth = 50.0
fitHeight=50.0
//注意這里,是聲明了變量
val tooltip = tooltip {
prefWidth = 200.0
textAlignment = TextAlignment.LEFT
isWrapText = true
style {
backgroundColor += c("white")
textFill = c("black")
}
isAutoHide = false
text = "這是一段長文本說明長文本說明這是一段長文本說明長文本說明這是一段長文本說明長文本說明這是一段長文本說明長文本說明"
}
setOnMouseEntered {
image = Image("/img/que_select.png")
tooltip.show(currentWindow)
}
setOnMouseExited {
image = Image("/img/que_normal.png")
tooltip.hide()
}
}
這里,還是建議使用字體庫可能效果比較好,可以快速修改顏色
給自己打波廣告,可以去看看我這個開源庫Tornadofx學習筆記（4）——IconTextFx開源庫,整合5000+個字體圖標 - Stars-one - 博客園
下面這圖片是我用字體庫來實現的效果圖:
