Very very simple qtip implementation

I want to create tooltips with qTip but they have a lot of ridiculous examples on their page that is waaaaaaaaaaay to complicated.

I want something like:

<span qtip="This is the text in my tooltip">This text has a tooltip</span>

is that possible?

The $(document).ready is not an option since I have a loop with several cells that needs tooltips all of them.

Meta code:

foreach Customer in List<Customers>
{
    <tr>
        <td>
            <span qtip="Tooltip for Name">Customer.Name</span>
        </td>
        <td>
            <span qtip="Tooltip for Address">Customer.Address</span>
        </td>
        <td>
            <span qtip="Tooltip for Phonenumber">Customer.Phonenumber</span>
        </td>
    </tr>
}

Is this possible with qtip or is there something else that can generate nice looking tooltips that works similar to the above?

Thanks for all help.

The docs suggest you should be able to use the following JS:

$('[qtip!=""]').qtip({
  content: {
    attr: 'qtip'
  }
});

This should grab all elements with a qtip attribute, and apply qTip to them.

Though I'm curious what you mean by

The $(document).ready is not an option since I have a loop with several cells that needs tooltips all of them.

Are you saying your list of customers is added to dynamically without reloading the page? If so please show where that happens.

For safety you should really use $(document).ready if your customer list doesn't change.

Here's an example based on the question:

$(document).ready(function() {
  $('[qtip!=""]').qtip({
    content: {
      attr: 'qtip'
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/qtip2/3.0.3/basic/jquery.qtip.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/qtip2/3.0.3/basic/jquery.qtip.min.css">

<table>
  <tbody>
    <tr>
      <td>
        <span qtip="Tooltip for Name">Customer.Name</span>
      </td>
      <td>
        <span qtip="Tooltip for Address">Customer.Address</span>
      </td>
      <td>
        <span qtip="Tooltip for Phonenumber">Customer.Phonenumber</span>
      </td>
    </tr>
  </tbody>
</table>