0

I am using tooltipster to generate tool tips. All works fine except in the situation where I need to set the contents of a div based on user input using a simple JavaScript function. The div contents consists of images, when hovering over each image, a tool tip should display. However, the tip displays as the default browser behaves for displaying title= with an image. The JavaScript I use is simple:

function setAwards() {
var awardsdiv=document.getElementById("awards"); awardsdiv.innerHTML="";
if (document.setvalues.superstar.checked == true) awardsdiv.innerHTML=awardsdiv.innerHTML + "<img class=\"tooltip\" title=\"Description of award\" width=\"16\" src=\"/pix/superstar.png\" alt=\"[ Super Star ]\" />";
[... stuff removed ...]
}

Is there a way to make this work? Tool tips do display elsewhere on this web page, so the resources needed appear to be set up correctly.

Thank you!

Beate Danielsen
  • 23
  • 1
  • 5

1 Answers1

0

You must initialize the tooltip ($(...).tooltipster({...})) after you have inserted your new HTML content or use delegation.

For "automatic" initialization, you might want to use delegated event listeners for that, see https://github.com/iamceege/tooltipster/issues/499

Louis Ameline
  • 2,779
  • 1
  • 25
  • 25
  • I inserted: right after the body tag, and this indeed worked. Thank you! – Beate Danielsen Dec 01 '15 at 18:55
  • No problem. You can accept the answer to close this question. – Louis Ameline Dec 02 '15 at 08:28