I've been dealing with this problem for some days but I can't find the solution. I have a function in Javascript that generates HTML after an Ajax call is done and I call this function like this:
$(document).ready(function() {
$("#list").change(function() {
reloadInfo($('#list').val());
});
reloadInfo($('#list').val());
});
And my function is the next:
function reloadInfo(id) {
var div = document.getElementById(id);
...
code += "<img id='led_" + res.id + "' src='green_led.gif' style='cursor: pointer' class='tooltipstered'>";
code += "<img id='" + res.id + "' src='mygraph.jpg'>";
...
div.innerHTML = code;
}
After that, I've tried to use Tooltipster in order to show 'mygraph.jpg' into a tooltip when I put the mouse over the 'green_led.gif' image and hide it when I move out the mouse cursor. To do so, I've used the next code into my $(document).ready():
$(document).ready(function() {
$("#list").change(function() {
reloadInfo($('#list').val());
});
reloadInfo($('#list').val());
$("body").on('mouseover', '.tooltipstered', function(){
$(this).tooltipster({
trigger: 'custom'
}).tooltipster('open').tooltipster('content', 'MYcontent');
});
});
But it doesn't seem to work. I've read Tooltipster documentation but I don't know what I'm doing wrong when I generate dynamically the HTML code (when I try it with static HTML it works, but I do it a bit different):
JavaScript
$(document).ready(function(){
$(".tooltipstered").tooltipster({
trigger: 'custom',
arrow: false
}).on('mouseover', function() {
$(this).tooltipster('instance').content("foo").open();
}).on('mouseout', function() {
$(this).tooltipster('instance').close();
})
});
HTML
<body>
<button id="1" class="tooltipstered" style="float: right">Hover1</button>
<button id="2" class="tooltipstered">Hover1</button>
</body>
The problem is when I generate HTML with JavaScript. First time I put the cursor over the image I don't get any error in the browser console, but the second time I repeat it i get this errors:
- Tooltipster: one or more tooltips are already attached to the element below. Ignoring.
<img id="led_27269" src="green_led.gif" style="cursor: pointer" class="tooltipstered">
- Uncaught TypeError: Cannot read property 'width' of undefined
If anybody knows what I'm doing wrong it would be of help. Thank you very much in advanced!!
I've been dealing with this problem for some days but I can't find the solution. I have a function in Javascript that generates HTML after an Ajax call is done and I call this function like this:
$(document).ready(function() {
$("#list").change(function() {
reloadInfo($('#list').val());
});
reloadInfo($('#list').val());
});
And my function is the next:
function reloadInfo(id) {
var div = document.getElementById(id);
...
code += "<img id='led_" + res.id + "' src='green_led.gif' style='cursor: pointer' class='tooltipstered'>";
code += "<img id='" + res.id + "' src='mygraph.jpg'>";
...
div.innerHTML = code;
}
After that, I've tried to use Tooltipster in order to show 'mygraph.jpg' into a tooltip when I put the mouse over the 'green_led.gif' image and hide it when I move out the mouse cursor. To do so, I've used the next code into my $(document).ready():
$(document).ready(function() {
$("#list").change(function() {
reloadInfo($('#list').val());
});
reloadInfo($('#list').val());
$("body").on('mouseover', '.tooltipstered', function(){
$(this).tooltipster({
trigger: 'custom'
}).tooltipster('open').tooltipster('content', 'MYcontent');
});
});
But it doesn't seem to work. I've read Tooltipster documentation but I don't know what I'm doing wrong when I generate dynamically the HTML code (when I try it with static HTML it works, but I do it a bit different):
JavaScript
$(document).ready(function(){
$(".tooltipstered").tooltipster({
trigger: 'custom',
arrow: false
}).on('mouseover', function() {
$(this).tooltipster('instance').content("foo").open();
}).on('mouseout', function() {
$(this).tooltipster('instance').close();
})
});
HTML
<body>
<button id="1" class="tooltipstered" style="float: right">Hover1</button>
<button id="2" class="tooltipstered">Hover1</button>
</body>
The problem is when I generate HTML with JavaScript. First time I put the cursor over the image I don't get any error in the browser console, but the second time I repeat it i get this errors:
- Tooltipster: one or more tooltips are already attached to the element below. Ignoring.
<img id="led_27269" src="green_led.gif" style="cursor: pointer" class="tooltipstered">
- Uncaught TypeError: Cannot read property 'width' of undefined
If anybody knows what I'm doing wrong it would be of help. Thank you very much in advanced!!
Share Improve this question edited Jun 21, 2016 at 13:45 malix 3,5821 gold badge32 silver badges41 bronze badges asked Jun 21, 2016 at 11:42 Gammik26Gammik26 311 silver badge4 bronze badges 1- Have you read iamceege.github.io/tooltipster/#delegation ? – Louis Ameline Commented Jun 21, 2016 at 12:04
1 Answer
Reset to default 4Two things :
- You shall destroy the
tooltipsters and recreate them on HTML content change. - Calling a
tooltipstermethod shall be done via$(...).tooltipster(methodName, arg1, arg2,...). Here you should look at the documentation for correct method name and arguments. So, you should call the creation (without method name) each time as you did in$("body").on('mouseover' ....
For recreation :
$(document).ready(function(){
$(".tooltipstered").tooltipster({
trigger: 'custom',
arrow: false
}).on('mouseover', function() {
$(this).tooltipster('instance').content("foo").open();
}).on('mouseout', function() {
$(this).tooltipster('instance').close();
})
});
shall be moved :
function reloadInfo(id) {
$(".tooltipstered").tooltipster('destroy');
... your reloading code
$(".tooltipstered").tooltipster({
trigger: 'custom',
arrow: false
}).on('mouseover', function() {
$(this).tooltipster('instance').content("foo").open();
}).on('mouseout', function() {
$(this).tooltipster('instance').close();
});
}