Question

我有一个带有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

Answer 1

将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>

qtip在特定元素上隐藏工具提示

1 个答案: