如何在角度材料设计的工具提示中添加换行符 [英] How to add line breaks within tooltip in angular material design

问题描述

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

http://codepen.io/apps4any/pen/RWQLyr

HTML

<md-content layout-padding=""><md-button class="md-fab md-fab-top-right" aria-label="Photos"><md-icon md-svg-src="img/icons/ic_photo_24px.svg" style="width: 24px; height: 24px;"></md-icon><md-工具提示>列表1
列表2
列表3
清单 4</md-工具提示></md-button><div style="margin-top: 150px;">
</md-content>

CSS:

.tooltipdemoBasicUsage md-toolbar .md-toolbar-tools .md-button, .tooltipdemoBasicUsage md-toolbar .md-toolbar-tools .md-button:hover {框阴影:无；边界:无；变换:无；-webkit-transform:无；}.tooltipdemoBasicUsage .left {顶部:70px ！重要；左:56px！重要；}.tooltipdemoBasicUsage .right {顶部:70px ！重要；右:56px！重要；}

JS

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

解决方案

添加此 CSS 似乎适用于您的情况(使用
s):

md-tooltip .md-content {高度:自动；}

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

或者您可以仅通过给它一个类来将其专门应用于此用例，例如tt-multiline，所以你可以在 CSS 中定位它:

md-tooltip.tt-multiline .md-content {高度:自动；}

<小时>

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

在这种情况下使用

md-tooltip ._md-content {高度:自动；}

对于特定的类

md-tooltip.tt-multiline ._md-content {高度:自动；}

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

这篇关于如何在角度材料设计的工具提示中添加换行符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！