Question

问题是当我第一次将鼠标悬停在按钮上时，我的工具提示会显示在我按钮的左下角。然后它似乎修复了它的位置并按预期工作。这在所有桌面浏览器中都会发生我使用的是v0.9.8。

Sample image

我用过那个例子 https://material.angularjs.org/0.9.8/#/demo/material.components.tooltip

这是html

<!DOCTYPE html>
<html>

<head>
    <title>Title</title>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />

    <link rel="stylesheet" href="assets/styles/angular-material.css" />
    <link rel="stylesheet" href="assets/styles/style.css" />
    <link rel="stylesheet" href="assets/styles/material-design-iconic-font.css" />
</head>

<body layout="column" ng-app="myApp">
    <md-toolbar class="md-accent">
        <h2 class="md-toolbar-tools">
            <span flex="">Awesome Md App</span>
            <md-button class="md-fab md-accent" aria-label="refresh">
                <md-tooltip>
                    Refresh
                </md-tooltip>
                <md-icon md-svg-src="img/icons/ic_refresh_24px.svg" style="width: 24px; height: 24px;">
                </md-icon>
            </md-button>
        </h2>
    </md-toolbar>

    <div flex layout="row">
        <!--main content-->
    </div>
</body>

<!-- vendor -->
<script src="assets/javascript/vendor/jquery-2.1.3.min.js"></script>
<script src="assets/javascript/vendor/angular.js"></script>
<script src="assets/javascript/vendor/angular-route.js"></script>
<script src="assets/javascript/vendor/angular-animate.js"></script>
<script src="assets/javascript/vendor/angular-aria.js"></script>
<script src="assets/javascript/vendor/angular-material.js"></script>

</html>

如果我删除了flex属性

<span flex="">Awesome Md App</span>

控件无序但工具提示看起来很好。可能是什么问题？

Answer 1

从yr body tag中删除layout =“column”。

   <body layout="column" ng-app="myApp">

   <body ng-app="myApp">

你应该把你的主要内容放在md-content＆amp;然后根据需要给出layout =“column”或“row”。

 <md-content flex layout="column">
   <!--main content-->
   <span>above</span>
   <span>below</span>
 </md-content>

或

 <md-content flex layout="row">
   <!--main content-->
   <span flex>i'm left</span>
   <span flex>i'm right</span>
 </md-content>

角度材料 - 工具提示和弹性问题

1 个答案: