I´m using qtip2 ajax-tooltips. This is the script (http://jsfiddle.net/craga89/L6yq3/):
// 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://qtip2.com/demos/data/owl',
loading: false
}
},
position: {
viewport: $(window)
},
style: 'qtip-wiki'
});
});
});
To use the script i need the link of the ajax file:
<a href='http://qtip2.com/demos/data/snowyowl'>Snowy Owl</a>
I want to call the ajax file without the link, but with the data-id attribute, so it looks like:
<a href="#" data-id="1">Snowy Owl</a>
How to make it?
To make it more clear, something like this code:
var urlFormat = "/content/web/tooltip/ajax/ajaxContent{0}.html";
$(document).ready(function() {
$("#products").qtip({
filter: "a",
content: {
url: "/content/web/tooltip/ajax/ajaxContent1.html"
},
width: 520,
position: "top",
requestStart: function(e) {
e.options.url = qtip.format(urlFormat, e.target.data("id"));
}
});
$("#products").find("a").click(false);
});
I think what you are after is this:
// 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: $(this).data('id'),
loading: false
}
},
position: {
viewport: $(window)
},
style: 'qtip-wiki'
});
});
});
Note that I changed the url parameter from a fixed url to use the data-id attribute from the hovered link. url: $(this).data('id'),
It even seems to work: http://jsfiddle.net/L6yq3/492/
edit
You could just build the url yourself then, and add the id in there somewhere. Something like this:url: 'http://path/to/ajax/script-' + $(this).data('id'),
Or if you have a (php) script on the server you could add the id as a query variable and do the processing there. Something like thisurl: 'http://path/to/ajax/script.php?id=' + $(this).data('id'),
Note that you could also use the actual id
attribute, and not the data-id
attribute by replacing $(this).data('id')
by $(this).attr('id')
You get the idea?