elementui 表格上加小问号 鼠标移入提示文字

      <el-table-column
        align="center"
        prop="efficiency"
        sortable="custom"
        label="效率值"
        :render-header="renderHeader"
        show-overflow-tooltip
        min-width="130"
      />
    renderHeader(h, { column, $index }) {
      return [
        column.label,
        h(
          'el-tooltip',
          {
            props: {
              content: (function() {
                return '效率值 = (周期内完成工单难度系数之和)/周期'
                // const label = column.label
                // switch ('1') {
                //   case '1':
                //     return '效率值 = (周期内完成工单难度系数之和)/周期'
                //     break
                //   case '提交数':
                //     return '网站页面上访客在应用上完成提交的数量'
                //     break
                //   case '成交数':
                //     return '网站页面上最终成功在应用上完成提交的数量'
                //     break
                // }
              })(),
              placement: 'top'
            }
          },
          [
            h('span', {
              class: {
                'el-icon-question': true
              }
            })
          ]
        )
      ]
      // return h("span", {
      //   attrs: {
      //     class: "cell", //ele原来样式
      //   },
      //   domProps: {
      //     innerHTML:
      //       column.label +
      //       '<el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-start"><span><i class="el-icon-question"></i></span></el-tooltip>',
      //   },
      // });
    },
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要实现标题后面有一个小问号,并且鼠标移到问号上会显示帮助提示的效果,你可以使用HTML和CSS来完成。下面是一种实现方式: 首先,在标题后面添加一个带有特定类名的元素,用来表示问号图标。例如: ```html <h1>标题<span class="help-icon">?</span></h1> ``` 接下来,使用CSS样式来设置问号图标的样式和交互效果。例如: ```css .help-icon { position: relative; cursor: help; } .help-icon::after { content: attr(data-tooltip); /* 提示文本 */ position: absolute; top: 100%; left: 50%; transform: translateX(-50%); padding: 5px; background-color: #f9f9f9; border: 1px solid #ccc; border-radius: 4px; box-shadow: 0 0 4px rgba(0, 0, 0, 0.2); font-size: 14px; line-height: 1.4; white-space: nowrap; visibility: hidden; opacity: 0; transition: opacity 0.3s, visibility 0.3s; } .help-icon:hover::after { visibility: visible; opacity: 1; } ``` 在上面的CSS代码中,首先将带有类名 `.help-icon` 的元素设置为相对定位,并将光标样式设置为 `help`,使其在鼠标移到问号图标上时显示为帮助光标。 然后,使用 `::after` 伪元素来创建一个提示框,通过设置 `content` 属性为元素的 `data-tooltip` 属性值来显示提示文本。提示框的样式可以根据需要进行调整,上述代码只是一个示例。 最后,在鼠标悬停时,通过设置 `visibility` 和 `opacity` 属性来控制提示框的显示与隐藏,实现鼠标移到问号图标上时显示提示的效果。 你可以根据需要调整样式和布局来适应你的页面。希望能帮到你!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值