mdlのツールチップにアイコンを固定するにはどうすればよいですか？

Question

材料アイコンでmdlツールチップを使用していますが、ツールチップをアイコンに固定するにはどうすればよいですか？

は通常、ツールヒントは、このようになりますが、スクロール時にツールチップが間違ったdivの上にある：

しかし、スクロール時に、それは次のようになります。

コード： 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

、私はあなたが相対的な親の内側にあなたの絶対位置のツールチップを置くことができる行動のこの種のを避けるために、コメントで言ったように。

たとえば、入力テキストの上と下にコンテンツテキストが表示されます。あなたの入力をスクロールしてスクロールすると、ツールチップが同じ場所に留まり、動かないことがわかります。

HTML部分

<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パート

.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