How can I make the mdl tooltip to stick to the icon? - html

Question

I am using the mdl tooltip on a an material icon, what can I do to make the tooltip stick to the icon.
Normally the tooltip looks like this but when scrolled the tooltip is on a wrong div:
But upon scroll it looks like this:
Code:
HTML
<div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="headerLogoLinkField" onchange="updateHeaderLogoLink()" >
<label class="mdl-textfield__label" for="headerLogoLinkField">Header Logo Link...</label>
</div>
<div id="header-logo-reset" class="icon material-icons toinline">replay</div>
<div class="mdl-tooltip toinline" for="header-logo-reset">
Reset To Default
</div>
</div>
CSS
.toinline {
display: inline;
}

Answer 1

So, as I said in the comments, to avoid this kind of behavior you can put your absolute position tooltip inside a relative parent.
Here's a fiddle for example with content text above and below the input text. When you hover your input and scroll, you can see the tooltip stay at the same place and don't move.
HTML part
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="headerLogoLinkField" onchange="updateHeaderLogoLink()" >
<label class="mdl-textfield__label" for="headerLogoLinkField">Header Logo Link...</label>
<div class="mdl-tooltip toinline" for="header-logo-reset">
Reset To Default
</div>
</div>
CSS Part
.toinline {
background: #333;
position: absolute;
color: #fff;
padding: 5px;
display: none;
top: -30px;
left: 50px;
}
.mdl-textfield:hover .toinline {
display: block;
}
.mdl-textfield { position: relative; }
Fiddle