原文: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. Spring Cloud Gateway限流实战

    欢迎访问我的GitHub https://github.com/zq2599/blog_demos 内容:所有原创文章分类汇总及配套源码,涉及Java.Docker.Kubernetes.DevOPS ...

  2. [JS高程] 特殊的原始值类型

    目录 原始值包装类型 (特殊引用类型) 原始值包装类型和应用类型的区别 原始值包装类型 (特殊引用类型) 在ES6 时,ECMAScript 数据类型是这样去分类的: 原始值(基本数据类型) Numb ...

  3. Linux终端使用aplay播放wav

    Linux终端使用aplay播放wav aplay是一个ALSA的声卡命令行soundfile录音机的驱动程序. 在linux下可以使用下面命令来查看用法: man aplay 所以可以使用来播放.w ...

  4. 解决ip和域名都能够ping通但是启动nginx无法访问网页的问题

    解决思路 最近双11逛西部数码的官网看看有没有什么服务器优惠的时候,发现了可以申请一个一块钱用一整年的SSL证书,立马心动下单了,想想俺也可以用https装装X了哈哈 不过在部署完证书,并调整ngin ...

  5. 各种多项式操作的 n^2 递推

    zszz,使用 NTT 可以在 \(\mathcal O(n\log n)\) 的时间内求出两个多项式的卷积.以及一个多项式的 \(\text{inv},\ln,\exp,\text{sqrt}\) ...

  6. Atcoder Grand Contest 033 D - Complexity(dp)

    Atcoder 题面传送门 & 洛谷题面传送门 首先 \(n^5\) 的暴力非常容易想,设 \(dp_{a,b,c,d}\) 表示以 \((a,b)\) 为左上角,\((c,d)\) 为右下角 ...

  7. kubernetes部署haproxy、keepalived为kube-apiserver做集群

    也可以用nginx.keepalived做负载均衡,看大家的需求. # yum -y install haproxy keepalived haproxy的配置文件(三台一样): cat > / ...

  8. 使用Mybatis出现的问题+配置优化+ResultMap

    一.可能出现的问题 1.Error querying database. Cause: com.mysql.jdbc.exceptions.jdbc4.CommunicationsException: ...

  9. 02 Windows安装C语言开发工具CodeBlocks

    CodeBlocks安装 使用微信扫码关注微信公众号,并回复:"C语言环境",免费获取下载链接! 1.卸载CodeBlocks(电脑未装此软件,跳过)    进入目录:C:\Pro ...

  10. day14搭建博客系统项目

    day14搭建博客系统项目 1.下载代码包 [root@web02 opt]# git clone https://gitee.com/lylinux/DjangoBlog.git 2.使用pid安装 ...