apps4any apps4any - 1 year ago 2957
AngularJS Question

How to add line breaks within tooltip in angular material design

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


<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>
<div style="margin-top: 150px;">


.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; }


.controller('AppCtrl', function($scope) {
$scope.demo = {};

Answer Source

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 break 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

.tt-multiline md-tooltip ._md-content {
    height: auto;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download