Angular material - 工具提示和 flex 的问题

Question

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

我用过那个例子 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

从您的正文标签中删除布局="column"。

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

   <body ng-app="myApp">

您应该将您的主要内容放在 md-content 中，然后根据需要提供 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>

Angular material - 工具提示和 flex 的问题

Angular material - issues with tooltip and flex

angularjs

angular-material