时间戳

首页 > 解决方案 > qtip 隐藏特定元素的工具提示

javascript - qtip 隐藏特定元素的工具提示

问题描述

我有一张带有 qtip 工具提示插件的表格。我想在表格的操作列中隐藏提示。尝试隐藏目标选项

 hide: {
    target: $('h1:first')
}

但这不是我需要的

  <table>
    <thead>
      <th>name</th>
      <th>telephone</th>
      <th>mobile</th>
      <th>action</th>
    </thead>
    <tbody>
      <tr data-tooltip="My tooltip text">
        <td>John</td>
        <th>3242123</th>
        <th>856966633325</th>
        <th><a href="#">edit</a></th>
      </tr>
      <tr data-tooltip="My tooltip text2">
        <td>Sarah</td>
        <th>5436346</th>
        <th>3543435345</th>
        <th><a href="#">edit</a></th>
      </tr>
    </tbody>
    </table>

js代码：

$('[data-tooltip!=""]').qtip({
    content: {
        attr: 'data-tooltip' // Tell qTip2 to look inside this attr for its content
    },

    show: {
        delay: 1000
    },
    hide: {
        fixed: true,

    },
    position: {
        target: 'mouse', // Use the mouse position as the position origin
        adjust: {
            // Don't adjust continuously the mouse, just use initial position
            mouse: false
        }
    },


});

我不知道如何在除了操作列之外的几乎所有部分中显示它

现场版：jsfiddle

标签： javascriptjqueryqtipqtip3

解决方案

将data-tooltip属性移动到td而不是tr. 并仅将其添加到td您需要显示工具提示的那些中。更新html将如下所示。

这是更新的JSFiddle

<table>
    <thead>
      <th>name</th>
      <th>telephone</th>
      <th>mobile</th>
      <th>action</th>
    </thead>
    <tbody>
      <tr>
        <td data-tooltip="My tooltip text">John</td>
        <th data-tooltip="My tooltip text">3242123</th>
        <th data-tooltip="My tooltip text">856966633325</th>
        <th><a href="#">edit</a></th>
      </tr>
      <tr>
        <td data-tooltip="My tooltip text2">Sarah</td>
        <th data-tooltip="My tooltip text2">5436346</th>
        <th data-tooltip="My tooltip text2">3543435345</th>
        <th><a href="#">edit</a></th>
      </tr>
    </tbody>
</table>

推荐阅读