原文: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 - 博客园

下面这图片是我用字体库来实现的效果图:

JavaFx Tooltip悬浮提示使用及自定义的更多相关文章

  1. css content 的 attr 用法 (实现悬浮提示)

    content 的attr 实现 鼠标悬浮 显示 悬浮提示, content 属性与 :before 及 :after 伪元素配合使用,来插入生成内容. 方法/步骤 1 <div> < ...

  2. validate[.unobtrusive]和Bootstrap实现tooltip错误提示

    validate[.unobtrusive]和Bootstrap实现tooltip错误提示 类似的文章园子里已有,请看这里,个人感觉稍显复杂,日前也打算写一个简单的给项目用,一些关键点记录于此.最终效 ...

  3. WPF 控件被禁用,悬浮提示不显示问题

    原文:WPF 控件被禁用,悬浮提示不显示问题 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/BYH371256/article/details/89 ...

  4. iview 如何在表格中给操作图标添加Tooltip文字提示?

    项目需要用到的iview 表格中操作项目有各种各样的图标,而各种各样的图标代表不同的操作,面对新用户可能很懵,那如何给这些图标添加Tooltip文字提示? 废话不多讲,直接看代码: <templ ...

  5. IntelliJ设置鼠标悬浮提示和修改快捷键

    IntelliJ设置鼠标悬浮提示和修改快捷键 设置鼠标悬浮提示 修改快捷键 进入设置菜单 删除原来的快捷键(注:你可以选择保留原来的快捷键,同时使用两个快捷键) Good Luck

  6. js实现tooltip动态提示效果(文字版)

    页面中经常用到鼠标移动到一个元素上面显示提示的功能,最开始的做法是在下面创建一个div然后动态显示这个div,但是这样需要加很多div,比较麻烦. 针对上面个的需求,这边写了一个tooltip动态提示 ...

  7. Tooltip浮动提示框效果(掌握里面的小知识)

    使用原生JavaScript设计和实现Tooltip浮动提示框特效,了解代码简化.事件绑定.事件冒泡等技巧和知识. 特效四个关键点:显示:鼠标移到ToolTip超链接上时,ToolTip提示框可以显示 ...

  8. Android Studio移动鼠标显示悬浮提示的设置方法

    欢迎和大家交流技术相关问题: 邮箱: jiangxinnju@163.com 博客园地址: http://www.cnblogs.com/jiangxinnju GitHub地址: https://g ...

  9. css悬浮提示框

    效果图: code: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

随机推荐

  1. 【AGC板刷记录】

    这个帖子,是在自己学知识点累了的时候就看看\(AGC\)的题目来休息. 而且白天上课可以做( AGC-001 \(A\ BBQ Easy\) 考虑从小到大排,相邻两个取为一对. BBQ Easy #i ...

  2. Atcoder Regular Contest 123 题解

    u1s1 我是真的不知道为什么现场这么多人切了 D,感觉 D 对思维要求显然要高于其他 300+ 人切掉的 D 吧(也有可能是 Atc 用户整体水平提升了?) A 开 幕 雷 击(这题似乎 wjz 交 ...

  3. char *p、char p[]、字符串的几个题目

    总结一下遇到的关于char *p.char p[]和字符串的题目: 例一:(指针的指针) 1 void getmemory(char **p) 2 { 3 p = (char *)malloc(100 ...

  4. 【豆科基因组】利马豆/洋扁豆Lima bean(Phaseolus lunatus L.)基因组2021NC

    目录 一.来源 二.结果 扁豆的染色体水平高质量组装 扁豆相关农艺性状的QTL定位 直系/旁系同源的演化和物种形成事件 与农艺性状相关基因的直系同源物 群体结构分析揭示扁豆遗传簇 豆荚发育过程中的基因 ...

  5. 63. Binary Tree Level Order Traversal II

    Binary Tree Level Order Traversal II My Submissions QuestionEditorial Solution Total Accepted: 79742 ...

  6. Mysql笔记(3)

    查询总数count(1)查询总和sum(数据名) 查询最大值max(数据名) 查询最小值min(数据名) 查询平均值avg(数据名) 去除重复 通过having来过滤group by字句的结果信息 i ...

  7. 作为Java技术面试官,我如何深挖候选人的技能

    作为Java资深技术面试官,首先我感觉有必要讲解"面试官深挖问题"的动机,在了解动机的前提下,大家才能更好地准备面试.面试官为什么要在一个点上深挖?两大目的.   1 首先是通过深 ...

  8. WebRTC视频分辨率设置

    前面我们能够打开摄像头.getUserMedia()时会传入参数,在参数里我们可以指定宽高信息.通过宽高参数控制输出的视频分辨率. html 在页面上摆放一些元素,下面是主要部分 <div id ...

  9. [php代码审计] Typecho 1.1 -反序列化Cookie数据进行前台Getshell

    环境搭建 源码下载:https://github.com/typecho/typecho/archive/v1.1-15.5.12-beta.zip 下载后部署到web根目录,然后进行安装即可,其中注 ...

  10. 【1】Embarrassingly Parallel(易并行计算问题)

    1.什么是Embarrassingly Parallel(易并行计算问题) 易并行计算问题:A computation that can be divided into a number of  co ...