如何在角度材料设计中的工具提示中添加换行符

Question

如何在工具提示中添加换行符我已经实现了工具提示,但我无法在工具提示中添加多行或换行符.Below是我的代码

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 = {};
});

Answer 1

添加这个CSS似乎适用于您的情况(使用<br>s):

md-tooltip .md-content {
    height: auto;
}

我不确定为什么Angular-Material将高度硬编码为22px.您需要检查此更改是否会破坏其他工具提示.

或者你只能通过给它一个类来专门将它应用于这个用例,例如tt-multiline,你可以用CSS来定位它:

md-tooltip.tt-multiline .md-content {
    height: auto;
}

编辑:从Angular-Material 1.1开始,一些类名已更改为以下划线开头.

在这种情况下使用

md-tooltip ._md-content {
    height: auto;
}

对于特定的课程

md-tooltip.tt-multiline ._md-content {
    height: auto;
}

Answer 2

由于角度材料版本> 1.1.2,您可以简单地覆盖.md-tooltip类:
(JsFiddle)

.md-tooltip {
    height: auto;
}

如果要设置特定工具提示的样式,请将自定义类添加到md-tooltip元素:
(jsFiddle)

HTML

<md-tooltip class="tooltip-multiline">
    I'm a multiline <br/> tooltip
</md-tooltip>

CSS

.tooltip-multiline {
  height: auto;
}

两种情况均在角材料1.1.2,1.1.3和1.1.4版本中进行了测试

Answer 3

您可以在此处查看md-tooltip(v0.11.4)的样式:https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.11.4/angular-material.css

我自己覆盖了材料设计样式,以实现漂亮的多线工具提示:

md-tooltip {
  font-family: Roboto, 'Helvetica Neue', sans-serif;
  .md-background {
    border-radius: inherit;
  }
  .md-content {
    height: auto;
    width: 400px;
    max-width: 400px;
    padding: 8px;
    white-space: initial;
  }
}
@media screen and (min-width: 600px) {
  md-tooltip .md-content {
    font-size: 14px;
    height: auto;
    width: 300px;
    padding: 8px;
    max-width: 300px;
  }
}

Answer 4

多数民众赞成我所做的.现在它将进行自动换行或放入<br> 其中.将max-with下面的内容设置为您需要的内容.

md-tooltip .md-content {
    height: auto !important;
    max-width: 200px !important;
    font-size: 13px !important;
}

md-tooltip {
    height: auto !important;
    max-width: 200px !important;
    font-size: 13px !important;
    overflow: visible !important;
    white-space: normal !important;
}

md-tooltip ._md-content {
    height: auto !important;
    max-width: 200px !important;
    font-size: 13px !important;
}