解决iview中tooltip文字显示不下的问题

最新推荐文章于 2023-08-07 18:00:46 发布

Dax1_

最新推荐文章于 2023-08-07 18:00:46 发布

阅读量607

点赞数

分类专栏：前端学习日记文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/dax1_/article/details/125164533

版权

前端学习日记专栏收录该内容

162 篇文章 15 订阅

订阅专栏

本文介绍了两种在前端开发中实现Tooltip提示信息的方法，用于展示详细内容。方法一是通过简单的HTML和CSS设置，当鼠标悬停时显示多行内容。方法二是通过JavaScript的render函数动态创建Tooltip，根据内容长度进行文字截取，并提供了完整的气泡内文字。这两种方式都适用于优化长文本的显示，提高用户体验。

摘要由CSDN通过智能技术生成

方法一

<Tooltip placement="bottom">
    <Button>Multiple lines</Button>
    <div slot="content" style="white-space: normal;">
       A balloon appears when the mouse passes over this text
     </div>
</Tooltip>

方法二

render: (h, params) => {
            let texts = ''; //表格列显示文字
            if (params.row.content !== null) {
              if (params.row.content.length > 6) { //进行截取列显示字数
                texts = params.row.content.substring(0, 6) + ".....";
              } else {
                texts = params.row.content;
              }
            }
            return h('div', [
              h('Tooltip', {
                props: {
                  placement: 'bottom',
                  // transfer: true  //是否将弹层放置于 body 内
                },
                style: {
                  cursor: 'pointer',
                }
              }, [ //这个中括号表示是Tooltip标签的子标签
                texts, //表格列显示文字
                h('div', {
                    slot: 'content',
                    style: {
                      whiteSpace: 'normal'
                    }
                  }, params.row.content //整个的信息即气泡内文字
                )
              ])
            ]);
          }