The issue is that my tooltip is shown on the bottom left part of my button when I hover on the botton for the first time. Then it seems it fixes its position and works as expected. This happens in all desktop browsers. I am using v0.9.8.
I have used that example https://material.angularjs.org/0.9.8/#/demo/material.components.tooltip
Here is the 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>If I remove the flex attribute
<span flex="">Awesome Md App</span>The controls are disordered but the tooltip appears just fine. What could be the problem?
Remove layout="column" from yr body tag.
you should place yr main content inside md-content & then give layout="column" or "row" as required.
or