Làm thế nào để thêm các ngắt dòng trong tooltip trong vật liệu thiết kế góc cạnh

Question

Làm thế nào để thêm ngắt dòng trong tooltip tôi đã triển khai Tooltip nhưng tôi không thể thêm dòng đa hoặc ngắt dòng trong tooltip.Below là mã của tôi

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

Thêm CSS này dường như làm việc trong trường hợp của bạn (với <br> s):

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

Tôi không chắc chắn lý do tại sao góc-Vật liệu mã hóa cứng chiều cao 22px. Bạn sẽ cần phải kiểm tra xem thay đổi này có phá vỡ các chú giải công cụ khác hay không.

Hoặc bạn có thể áp dụng riêng cho trường hợp sử dụng này chỉ bằng cách cho nó một lớp, ví dụ: tt-multiline, vì vậy bạn có thể nhắm mục tiêu nó trong CSS:

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

---

Edit: Bắt đầu từ góc-Material 1.1, một số tên lớp đã thay đổi bắt đầu với một dấu gạch dưới.

Trong trường hợp này sử dụng

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

và cho lớp học cụ thể

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

Answer 2

Bạn có thể xem phong cách cho md-tooltip (v0.11.4) ở đây: https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.11.4/angular-material.css

ghi đè My own với kiểu dáng thiết kế material design để cho phép các chú giải công cụ đa dòng đẹp mắt:

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 3

Đó là những gì tôi đã làm. Bây giờ nó sẽ thực hiện ngắt dòng tự động hoặc đặt <br> vào đó. Đặt số max-with bên dưới vào những gì bạn cần.

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

Answer 4

phiên bản góc cạnh> 1.1.2 bạn chỉ có thể ghi đè lên .md-tooltip lớp:
(JsFiddle)

.md-tooltip { 
    height: auto; 
} 

---

Và nếu bạn muốn phong cách một tooltip Đặc biệt, thêm một lớp tùy chỉnh để md-tooltip yếu tố:
( jsFiddle)

HTML

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

CSS

.tooltip-multiline { 
    height: auto; 
} 

cả hai trường hợp thử nghiệm trong góc vật chất 1.1.2, 1.1.3 và 1.1.4 phiên bản

Answer 5

Hoặc bạn có thể sử dụng white-space: pre-line; trong lớp tùy chỉnh của tooltip md của bạn. :)