Material Design lite工具提示定位

我正在使用material design lite库，但我遇到问题。当我减少窗口，有时工具提示不正确positioning，并且也采取2 lines而不是one。Material Design lite工具提示定位

的Html

<html> 
    <head> 
    <!-- Material Design Lite --> 
    <script src="https://code.getmdl.io/1.2.0/material.min.js"></script> 
    <link rel="stylesheet" href="https://code.getmdl.io/1.2.0/material.indigo-pink.min.css"> 
    <!-- Material Design icon font --> 
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> 
    </head> 
    <body> 
    <!-- Rich Tooltip --> 

    <button id="tt3" class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored"> 
     <i class="material-icons">add</i> 
    </button> 
    <div class="mdl-tooltip mdl-tooltip--top " data-mdl-for="tt3"> 
    Upload <strong>file.zip</strong> 
    </div> 

    </body> 
</html>

的CSS

#tt3 
{ 
    position:fixed; 
    right:24px; 
    bottom:24px; 

}

来源

2016-08-17 zaarr78

试试这个

.mdl-tooltip.mdl-tooltip--top{ width:70px;}

#tt3 
 
{ 
 
    position:fixed; 
 
    right:24px; 
 
    bottom:24px; 
 

 
} 
 

 
.mdl-tooltip.mdl-tooltip--top{ 
 
    width:70px; 
 

 
}

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> 
 
<link rel="stylesheet" href="https://code.getmdl.io/1.2.0/material.indigo-pink.min.css"> 
 
<script defer src="https://code.getmdl.io/1.2.0/material.min.js"></script> 
 

 
    <!-- Material Design Lite --> 
 
    <script src="https://code.getmdl.io/1.2.0/material.min.js"></script> 
 
    <link rel="stylesheet" href="https://code.getmdl.io/1.2.0/material.indigo-pink.min.css"> 
 
    <!-- Material Design icon font --> 
 
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> 
 
    
 
    <!-- Rich Tooltip --> 
 

 
    <button id="tt3" class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored"> 
 
     <i class="material-icons">add</i> 
 
    </button> 
 
    <div class="mdl-tooltip mdl-tooltip--top " data-mdl-for="tt3"> 
 
    Upload <strong>file.zip</strong> 
 
    </div>

来源

2016-08-17 08:08:17

Material Design lite工具提示定位

回答

相关问题