How to add line break in tooltip I have implemented the Tooltip but i am not able to add multi line or line breaks in tooltip.Below is my code
http://codepen.io/apps4any/pen/RWQLyr
Html
<div ng-controller="AppCtrl" ng-cloak="" class="tooltipdemoBasicUsage" ng-app="MyApp">
<md-content layout-padding="">
<md-button class="md-fab md-fab-top-right right" aria-label="Photos">
<md-icon md-svg-src="img/icons/ic_photo_24px.svg" style="width: 24px; height: 24px;"></md-icon>
<md-tooltip>
List1<br>
List2<br>
List3<br>
List4
</md-tooltip>
</md-button>
<div style="margin-top: 150px;">
</div>
</md-content>
</div>
CSS:
.tooltipdemoBasicUsage md-toolbar .md-toolbar-tools .md-button, .tooltipdemoBasicUsage md-toolbar .md-toolbar-tools .md-button:hover {
box-shadow: none;
border: none;
transform: none;
-webkit-transform: none; }
.tooltipdemoBasicUsage .left {
top: 70px !important;
left: 56px !important; }
.tooltipdemoBasicUsage .right {
top: 70px !important;
right: 56px !important; }
JS
angular.module('MyApp')
.controller('AppCtrl', function($scope) {
$scope.demo = {};
});
Adding this CSS seems to work in your case (with the <br>
s):
md-tooltip .md-content {
height: auto;
}
I'm not sure why Angular-Material hard-coded the height to 22px. You'll need to check whether this change breaks other tooltips.
Or you can apply it specifically to this use case only by giving it a class, e.g. tt-multiline
, so you can target it in CSS:
md-tooltip.tt-multiline .md-content {
height: auto;
}
Edit: Starting from Angular-Material 1.1, some class names have changed to start with a underscore.
In this case use
md-tooltip ._md-content {
height: auto;
}
and for specific class
md-tooltip.tt-multiline ._md-content {
height: auto;
}