Wie kann ich den mdl Tooltip machen, um an dem Icon zu bleiben?

Question

Ich verwende den mdl-Tooltip auf einem Material-Symbol. Was kann ich tun, damit der Tooltip am Symbol haftet?

Normalerweise sieht der Tooltip wie diese, aber wenn der Tooltip ist auf einem falschen div gescrollt:

Aber auf Scroll sieht es wie folgt aus:

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, wie ich in den Kommentaren gesagt, diese Art von Verhalten vermeiden Sie Ihren absolute Position Tooltip innerhalb eineine relativ Eltern setzen können.

Hier ist eine Geige zum Beispiel mit Inhalt Text über und unter dem Eingabetext. Wenn Sie den Mauszeiger über Ihre Eingabe bewegen und blättern, können Sie sehen, dass die QuickInfo am selben Ort bleibt und sich nicht bewegt.

HTML-Teil

<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 Teil

.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