tooltip实现悬停内容高亮及格式化

原创 已于 2023-10-26 15:01:50 修改 · 583 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
GEO检测
标签
#jsp #javascript #vue.js #elementui
于 2023-10-25 17:59:06 首次发布

一: 通过highlight.js项目实现对json字符串的染色高亮

此项目是jsp文件,并且引用了element-ui/highlight.js的组件，对tooltip中的json文本（理论上支持highlight所支持的所有项目）进行高亮并格式化

二: 实现效果

在这里插入图片描述

三: 代码实现

关键点在于成功引入相关的js及css，并且在tooltip渲染时进行数据染色。再将染色后的数据放到v-html中进行页面渲染(关键方法: highlightedData)

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="/WEB-INF/pages/main/taglibs.jsp" %>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>主子服务查询</title>
    <script src="${pageContext.request.contextPath}/js/vueEle/2.7/vue.js"></script>
    <script src="${pageContext.request.contextPath}/js/vueEle/js/lib/vue-resource.js"></script>
    <script src="${pageContext.request.contextPath}/js/vueEle/2.7/vueEle.js"></script>
    <script src="${pageContext.request.contextPath}/js/highlight/es/highlight.min.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/js/vueEle/2.7/vueEle.css">
    <link href="${pageContext.request.contextPath}/js/highlight/styles/atom-one-dark-reasonable.min.css"
          rel="stylesheet"
          type="text/css">
    <style>
        <%--  解决文本过长显示不开的问题   --%>
        .el-tooltip__popper {
            /*border-left: 20px solid #000000; !* 设置左侧边框为10px宽，颜色为黑色 *!*/
            /*border-right: 10px solid #000000; !* 设置左侧边框为10px宽，颜色为黑色 *!*/
            /*max-height: 700px;*/
            /*max-width: 800px;*/
            max-height: 95%;
            max-width: 65%;
            overflow-y: auto; /* 滑动框 */
            /*white-space: pre;*/
            /*word-wrap: break-word;*/
            text-align: left; /*文本靠左对齐*/
        }
    </style>
</head>
<body>
<div id="app" style="width: 100%">
    <template>
        <el-container>
            <el-header>
                <el-form ref="form" :model="searchForm" label-width="150px"
                         style="margin: 10px 10px 10px 10px;float: left"
                         :inline="true"
                         @keyup.enter.native="search">
                    <el-row>
                        <el-col>
                            <el-form-item label="工单号">
                                <el-input v-model="searchForm.applicationNo"></el-input>
                            </el-form-item>
                            <el-form-item label="商编号">
                                <el-input v-model="searchForm.merchantNo"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="search">查询</el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </el-header>
            <el-main>
                <el-table
                        v-loading="loading"
                        :data="tableData"
                        style="width: 100%;margin-bottom: 20px;"
                        row-key="index"
                        border
                        empty-text="无数据"
                        property="sid" show-overflow-tooltip="true" label="" min-width="1"
                <%--                        default-expand-all--%>
                        :tree-props="{children: 'subFlowServiceRecords', hasChildren: 'hasChildren'}">

                    <el-table-column
                            prop="index"
                            label="序号"
                            width="100"></el-table-column>
                    <el-table-column
                            prop="applicationNo"
                            label="工单号">
                    </el-table-column>
                    <el-table-column
                            prop="merchantNo"
                            label="商编号"
                            width="150">
                    </el-table-column>
                    <el-table-column
                            prop="serviceName"
                            label="步骤">
                    </el-table-column>
                    <el-table-column
                            prop="status"
                            label="状态"
                            width="80">
                    </el-table-column>

                    <el-table-column label="请求信息"
                                     width="100"
                    >
                        <template slot-scope="scope" v-if="scope.row.mainServiceData">
                            <el-tooltip
                                    placement="left">
                                <div slot="content" v-html='highlightedData(scope.row.mainServiceData)'></div>
                                <el-button @click="copyData(scope.row.mainServiceData)">复制</el-button>
                            </el-tooltip>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="startTime"
                            label="开始时间"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="endTime"
                            label="结束时间"
                            width="180">
                    </el-table-column>
                </el-table>
                <div class="block">
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :page-size="pageData.pageSize"
                            :page-sizes="[10, 20, 30, 40]"
                            layout="total, sizes, prev, pager, next"
                            :total="pageData.total">
                    </el-pagination>
                </div>
            </el-main>
        </el-container>
    </template>


</div>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                loading: false,
                tableData: [],
                pageData: {
                    currentPage: 1,
                    pageSize: 10,
                    total: 0,
                },
                searchForm: {
                    applicationNo: null,
                    merchantNo: null
                }
            }
        },
        methods: {
            copyData(data) {
                const textarea = document.createElement('textarea');
                textarea.value = JSON.stringify(JSON.parse(data), null, 2);
                document.body.appendChild(textarea);
                textarea.select();
                document.execCommand('copy');
                document.body.removeChild(textarea);
                this.$message({
                    message: '复制成功(已格式化)!',
                    type: 'success'
                });
            },
            highlightedData(code) {
                const language = 'json'; // 指定要高亮的语言，例如 JSON
                let code2 = JSON.stringify(JSON.parse(code), null, 2);
                code2 = hljs.highlight(language, code2).value;
                return '<pre><code>' + code2 + '</pre></code>';
            },
            handleSizeChange(val) {
                this.pageData.pageSize = val;
                this.search()
            },
            handleCurrentChange(val) {
                this.pageData.currentPage = val;
                this.search()
            },
            search() {
                let applicationNo = this.searchForm.applicationNo;
                let merchantNo = this.searchForm.merchantNo;
                if ((applicationNo && applicationNo !== '')
                    || (merchantNo && merchantNo !== '')) {
                    this.loading = true;
                    this.$http.post('../flowService/queryRecordByApplicationNo',
                        {
                            applicationNo: applicationNo,
                            merchantNo: merchantNo,
                            currentPage: this.pageData.currentPage,
                            pageSize: this.pageData.pageSize
                        }
                    ).then(res => {
                        if (res.body.status === 'success') {
                            this.tableData = res.body.object.flowServiceRecords
                            this.pageData.total = res.body.object.total;
                            this.setSerialNumbers(this.tableData);
                        } else {
                            alert(res.body.errorMessage);
                        }
                        this.loading = false;
                    })
                } else {
                    this.loading = false;
                    this.$message({
                        message: '请至少输入一个参数!',
                        type: 'warning'
                    });
                }
            },
            setSerialNumbers(data, parentSerial = '') {
                let serial = 1;
                for (const item of data) {
                    item.index = parentSerial + serial;
                    serial++;
                    if (item.subFlowServiceRecords && item.subFlowServiceRecords.length > 0) {
                        this.setSerialNumbers(item.subFlowServiceRecords, item.index + '.');
                    }
                }
            }
        }
    })
</script>
</body>
</html>
自定义修改el-talbe show-overflow-tooltip的样式
m0_38038870的博客
06-16 1万+
自定义el-table show-overflow-tooltip样式
手把手教你优化Element表格提示：从show-overflow-tooltip到el-tooltip的进阶技巧
weixin_29017445的博客
03-10 225
本文深入探讨了Element UI表格提示功能的优化方案，详细对比了默认的show-overflow-tooltip属性与手动集成el-tooltip组件的核心差异。通过实战案例，手把手教你如何利用el-tooltip实现样式深度定制、渲染富文本内容、增强交互体验并进行性能优化，从而显著提升企业级中后台应用的数据表格用户体验。
el-table设置了show-overflow-tooltip多出字符省略时，悬停展示的内容超出屏幕
gjylalaland的博客
06-06 415
在元素位置对应名称.el-tooltip__popper .is-dark下面添加属性max-width: 80vw;
关于Echarts图标的tooltip配置中的formatter
weixin_55501516的博客
02-20 9581
模板变量有 {a}, {b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等。在 trigger 为 ‘axis’ 的时候，会有多个系列的数据，此时可以通过 {a0}, {a1}, {a2} 这种后面加索引的方式表示系列的索引。不同图表类型下的 {a}，{b}，{c}，{d} 含义不一样。使用tooltip的formatter进行格式化，格式化前效果如上图，一个是数字，一个是xxx万，不符合设计，需要统一，期望效果是这样。自定义函数的第一个参数params是formatter需要的数据集。
内容溢出处理：隐藏显示省略号，鼠标悬停提示全部内容
jadetii的学习地盘
04-28 6538
备注：（1）div的文字会以省略的形式显示，并不是单独的截取。单独设定text-overflow:ellipsis;是没有效果的,因为它仅仅是注解，标注溢出时以省略的形式显示。所以必须要有white-space:nowrap，让文字显示子一行，又需要用overflow:hidden来使溢出的内容隐藏（配合使用）。
show-overflow-tooltip过长设置悬浮框样式vue3 elementplus
m0_75025344的博客
06-09 3362
注：不能添加scope，重新写style标签添加。
Echarts鼠标悬浮显示数据详细介绍
热门推荐
azhe5201314的专栏
08-30 2万+
Echarts鼠标悬浮显示数据
3分钟用快马AI实现ECharts智能Tooltip - 让数据开口说话
IndigoNight21的博客
11-10 274
特别是Tooltip这种需要精细调试的组件，AI给出的默认方案已经包含了我能想到的所有细节优化，甚至考虑了国际化的数字格式化场景。建议有图表开发需求的同学都试试这个工作流：描述需求 -> 生成代码 -> 实时预览 -> 一键部署。输入需求描述后，系统直接输出了完整可运行的HTML文件，包含所有功能实现。- 智能Tooltip：悬浮时显示日期、销售额（带货币符号）、增长率（百分比）、区域信息。
WinForm实战：OxyPlot图表鼠标悬停显示坐标值（附完整代码）
最新发布
weixin_30576827的博客
03-28 367
本文详细介绍了在WinForm项目中集成OxyPlot图表控件并实现鼠标悬停显示坐标值的完整解决方案。通过NuGet包安装、基础控件集成、坐标转换核心原理解析，以及优化后的鼠标移动事件处理，帮助开发者快速掌握这一实用功能。文章还提供了性能优化技巧和高级功能扩展，适用于数据可视化应用开发。
解决element-ui表格添加show-overflow-tooltip后鼠标移入无法复制内容的问题
Jayshon_Jaa的博客
02-11 3085
在element ui的表格组件中，当表格内容超过列宽后，可以使用show-overflow-tooltip属性设置悬浮内容，但是当鼠标移入到悬浮窗时，悬浮窗却直接消失，从而导致超过列宽的内容无法复制。element官方表示没有修复此问题的计划，但是实际上产品又确确实实有这个需求，因此我们可以使用第三方库来解决这个问题。
element表格内容过多，鼠标悬浮显示全部内容（show-overflow-tooltip)，内容过长显示悬浮抖动
游人
03-29 1万+
在表格要展示的列过多时，有些表格内容过多就会用到这个属性，表格的内容按表头宽度超过省略，鼠标悬浮显示全部内容，如果内容过多超屏幕会一直抖动 用法很简单，加一行show-overflow-tooltip就可以了 <el-table-column show-overflow-tooltip prop="description" align="center" label="企业介绍" .
ECharts 坐标轴标签、tooltip文本格式化
LavanSum的博客
06-07 1万+
在ECharts折线图中（其他系列图标同理），我们需要对x轴坐标标签、坐图形上的文本标签、提示框组件文本等进行格式化，选项参数设置如下：x轴坐标标签格式化： xAxis: { axisLabel: { show: true, // 默认为true interval: 0, // 设置x轴文本标签全部显示 rotate: 4
Echarts中tooltips数据格式化（点击不同的lengend数据提示框中显示相应的单位）
qq_37797639的博客
12-20 2244
# EchartsAPI入口：http://echarts.baidu.com/option.html#title 1. 效果图：     官方文档：http://echarts.baidu.com/option.html#tooltip.formatter 2. 通过formater回调函数实现单位格式化 第一个参数 params 是 formatter 需要的数据集。格式如下： ...
【无标题】动态表头设置超出隐藏，鼠标悬停提示,不超出不提示
weixin_70573795的博客
03-27 315
【代码】【无标题】动态表头设置超出隐藏，鼠标悬停提示。
格式化tooltip展示内容后显示小圆点
jiurikeai的博客
09-29 499
格式化后小圆点去哪了。在tooltip配置的格式化formatter后，默认的小圆点会消失。其实他在formatter的参数中的marker属性中。因此，我们在格式化tooltip文字展示时，可以将marker拼接到相应位置，还可自定义新的marker样式。下图的需求是，格式化tooltip，并在最后添加总量的统计展示。其中sumMarker 是自定义的**总数小圆点**
el-table show-overflow-tooltip触发，切换页面，导致提示信息不消失悬停左上角
weixin_43305450的博客
07-26 2203
el-table show-overflow-tooltip触发，切换页面，导致提示信息不消失悬停左上角
echarts格式化tooltip数据
mingY的博客
10-21 1553
1.效果 将数据每隔三个数字用逗号分隔 2.实现代码 tooltip: { trigger: "axis", backgroundColor: "rgba(50,50,50,0.7)", // 提示框浮层的背景颜色。 textStyle: { // 提示框浮层的文本样式。 color: "#fff", fontStyle: "normal", ..
工作记录 -- el-table 取消鼠标悬浮时行高亮效果
qq_44017823的博客
10-09 2032
用户使用鼠标单机行时，也会出现行颜色改变的情况，修改其单机的行颜色。使用el-table组件时，会有默认事件。改变鼠标悬浮时高亮的效果。
element表格文本超出显示省略号，鼠标悬停出现完整文字提示
sxl_lala的博客
12-28 3934
div>{{ scope.row.name }}</div>//在提示框中显示的文本内容。1.表格文字超出部分省略号显示。：这是工具提示的位置，设置为 "top" 表示在鼠标悬停时在上方显示提示框。这样当鼠标悬停在省略的文字上时，会显示完整的信息提示。来指定信息提示的样式，默认黑色，可不写此句。2.鼠标悬停单元格出现提示（第一种方法）2.鼠标悬停单元格出现提示（第二种方法）Element UI 的工具提示组件。属性，将提示框的内容设置为当前行的。，用于在鼠标悬停时显示提示框。来启用文本溢出时的提示效果，
el-table 修改鼠标悬停时修改当前行和列的背景色，高亮显示
qq_45078777的博客
11-11 4039
el-table 修改鼠标悬停时修改当前行和列的背景色，高亮显示
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

b0b0大魔王

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值