Search code examples
javascripthtmlinternet-explorerpolymerinnerhtml

Internet Explorer: issue with dynamically setting polymer paper-tooltip innerHTML

Using Polymer 1.0, paper-tooltip

In the attached function I create a variable iconsToInsert, which contains svg and text elements which I put together as a string.

When I have all the svg's and texts I need together, I set the innerHTML of the tooltip like this:

tooltips[5].children[0].innerHTML = iconsToInsert;

This adds f.eg three svg's with text next to them in the tooltip.

This works fine in Chrome and FF, but in Internet explorer I can only see the changed innerHTML in the dev tools but the tooltip is not triggered when hover over my element.

In Chrome and FF the tooltips class changes on hover from 'hidden style-scope paper-tooltip' to 'style-scope paper-tooltip' but here nothing happens.

I have to do this, because I can't know from the beginning which icons and how much i have to insert.

I know this is not so well explained and you probably need more details, just ask me please.

Solution

  • Well i solved it like this:

    var lastVisibleIconTooltip = tooltips[5].children[0],
    myDiv = document.createElement('div');
myDiv.innerHTML = iconsToInsert;
lastVisibleIconTooltip.appendChild(myDiv)