Data id attribute and ajax tooltip

This site is best viewed in a modern browser with JavaScript enabled.

Rekkos

Hello,

I´m using qtip2 tooltips and want to call the tooltip with ajax and a data id attribute.

I´ve items "ajaxContent1.html, ajaxContent2.html", which i want to call with the data id attribute inside of my tooltip. Now i have the problem, that the tooltip doesn´t load the content of the files.

Here is my code:

<script type="text/javascript">

// Create the tooltips only when document ready
$(document).ready(function()
{
 // MAKE SURE YOUR SELECTOR MATCHES SOMETHING IN YOUR HTML!!!
 $('a').each(function() {
     $(this).qtip({
        content: {
            text: 'Loading...',
            ajax: {
                url: 'http://www.example.de/items/ajaxContent.html?id='     + $(this).data('id'),
                loading: false
            }
        },
        position: {
            viewport: $(window)
        },
        style: 'qtip-wiki'
        });
        });
       });

  </script>

And now i want to call the tooltip with:

<a href='#' data-id='1' >Test</a>

root

Why?

Would it not be easier to put the "Tool tip" in the HTML tag to start with? It is less coding, less bulk and no need to put your server under undue duress fetching elements that should already be set in any case to conform with accessibility regulations.

Rekkos

I don´t to type in the tooltip content everytime. So i chose this solution with the data id. But somewhere is a mistake in my code, i think.

root

The point I am making though is the issue of compatibility with screen readers and accessible web design.

Rekkos

Thanks, but could someone look over the code, please?

root

Question: If you are setting the ID's for these items, why are you not setting the title tag at the same time and have done with it?

Secondly, are you naming the ID's individually as in id1, id2, id3, etc as an example?

Rekkos

I´ve a folder and inside of this folder i have my items. They are all called ajaxContent + the id (ajaxContent1, ajaxContent2, ajaxContent etc).

I think there is a mistake in building the url:

 url: 'http://www.example.de/items/ajaxContent.html?id='     + $(this).data('id'),