如何在 angular material 设计中的工具提示中添加换行符
How to add line breaks within tooltip in angular material design
如何在工具提示中添加换行符
我已经实现了工具提示,但我无法在 tooltip.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 = {};
});
添加此 CSS 似乎适用于您的情况(使用 <br>
s):
md-tooltip .md-content {
height: auto;
}
我不确定为什么 Angular-Material 将高度硬编码为 22px。您需要检查此更改是否会破坏其他工具提示。
或者您可以仅通过给它 class 将其专门应用于此用例,例如tt-multiline
,因此您可以在 CSS:
中定位它
md-tooltip.tt-multiline .md-content {
height: auto;
}
编辑:从 Angular-Material 1.1 开始,一些 class 名称已更改为以下划线开头。
在这种情况下使用
md-tooltip ._md-content {
height: auto;
}
以及特定的 class
md-tooltip.tt-multiline ._md-content {
height: auto;
}
您可以在此处查看 md-tooltip (v0.11.4) 的样式:https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.11.4/angular-material.css
我自己覆盖 material 设计样式以允许漂亮的多行工具提示:
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;
}
}
将下面的 max-with
设置为您需要的值。现在它将自动换行或放置 <br/>
进去。
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;
}
因为 angular-material 版本 >1.1.2 你可以简单地覆盖 .md-tooltip
class:
(JsFiddle)
.md-tooltip {
height: auto;
}
如果您想为特定工具提示设置样式,请将自定义 class 添加到 md-tooltip
元素:
(jsFiddle)
HTML
<md-tooltip class="tooltip-multiline">
I'm a multiline <br/> tooltip
</md-tooltip>
CSS
.tooltip-multiline {
height: auto;
}
两种情况都在 angular-material 1.1.2、1.1.3 和 1.1.4 版本
中进行了测试
或者您可以在 md 工具提示的自定义 class 中使用 white-space: pre-line;
。 :)
我正在使用 angular_material 1.1.8
,对我来说单一答案无效,组合有效。
html
<md-tooltip class="tooltip-multiline">Years ago, when I was backpacking...</md-tooltip>
css
.tooltip-multiline {
height: auto;
white-space: pre-line;
max-width:300px;
line-height: 14px; /*optional*/
font-weight:200;/*optional*/
letter-spacing: 0.5px; /*optional*/
font-size:11px;/*optional*/
}
希望对您有所帮助..
angular material 工具提示正在扭曲 div 中的所有内容,因此它有效
<md-tooltip class="tooltip-multiline" md-direction="left">
This is tooltip
</md-tooltip>
.tooltip-multiline div{
height: auto;
}
搜索解决方案一段时间后来自变量内容:
.ts
public matTooltipContent: string = 'Line 1 comment\nLine 2 comment\nLine 3 comment'
.html
<button mat-icon-button aria-hidden="false" class="material-icons-outlined"
[matTooltip]="matTooltipContent"
matTooltipClass="allow-cr"
(click)="onInfoButtonClicked($event)">
<mat-icon >help_outlined</mat-icon>
</button>
.css
.allow-cr {
white-space: pre;
}
如何在工具提示中添加换行符 我已经实现了工具提示,但我无法在 tooltip.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 = {};
});
添加此 CSS 似乎适用于您的情况(使用 <br>
s):
md-tooltip .md-content {
height: auto;
}
我不确定为什么 Angular-Material 将高度硬编码为 22px。您需要检查此更改是否会破坏其他工具提示。
或者您可以仅通过给它 class 将其专门应用于此用例,例如tt-multiline
,因此您可以在 CSS:
md-tooltip.tt-multiline .md-content {
height: auto;
}
编辑:从 Angular-Material 1.1 开始,一些 class 名称已更改为以下划线开头。
在这种情况下使用
md-tooltip ._md-content {
height: auto;
}
以及特定的 class
md-tooltip.tt-multiline ._md-content {
height: auto;
}
您可以在此处查看 md-tooltip (v0.11.4) 的样式:https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.11.4/angular-material.css
我自己覆盖 material 设计样式以允许漂亮的多行工具提示:
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;
}
}
将下面的 max-with
设置为您需要的值。现在它将自动换行或放置 <br/>
进去。
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;
}
因为 angular-material 版本 >1.1.2 你可以简单地覆盖 .md-tooltip
class:
(JsFiddle)
.md-tooltip {
height: auto;
}
如果您想为特定工具提示设置样式,请将自定义 class 添加到
md-tooltip
元素:
(jsFiddle)
HTML
<md-tooltip class="tooltip-multiline">
I'm a multiline <br/> tooltip
</md-tooltip>
CSS
.tooltip-multiline {
height: auto;
}
两种情况都在 angular-material 1.1.2、1.1.3 和 1.1.4 版本
中进行了测试或者您可以在 md 工具提示的自定义 class 中使用 white-space: pre-line;
。 :)
我正在使用 angular_material 1.1.8
,对我来说单一答案无效,组合有效。
html
<md-tooltip class="tooltip-multiline">Years ago, when I was backpacking...</md-tooltip>
css
.tooltip-multiline {
height: auto;
white-space: pre-line;
max-width:300px;
line-height: 14px; /*optional*/
font-weight:200;/*optional*/
letter-spacing: 0.5px; /*optional*/
font-size:11px;/*optional*/
}
希望对您有所帮助..
angular material 工具提示正在扭曲 div 中的所有内容,因此它有效
<md-tooltip class="tooltip-multiline" md-direction="left">
This is tooltip
</md-tooltip>
.tooltip-multiline div{
height: auto;
}
搜索解决方案一段时间后来自变量内容:
.ts
public matTooltipContent: string = 'Line 1 comment\nLine 2 comment\nLine 3 comment'
.html
<button mat-icon-button aria-hidden="false" class="material-icons-outlined"
[matTooltip]="matTooltipContent"
matTooltipClass="allow-cr"
(click)="onInfoButtonClicked($event)">
<mat-icon >help_outlined</mat-icon>
</button>
.css
.allow-cr {
white-space: pre;
}