CODEWITHSUNDEEP
javascriptjqueryqtipqtip3
lock
lock

Reputation: 739

qtip hide tooltip on specific elements

I have a table with qtip tooltip plugin. I want hidden tip in action column in the table. Try hide target option

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

But that's not what I need

  <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 code :

$('[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
        }
    },


});

I don't know how to display it in just about every part except action column

live version : jsfiddle

Upvotes: 1

Views: 111

Answers (1)

Karan
Karan

Reputation: 12629

Move data-tooltip attribute to td instead of tr. And add it in only those td in which you need to display tooltip. Updated html will be like below.

Here is updated 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>

Upvotes: 0

Related Questions