각도 재료 설계에서 도구 설명에 선 구분을 추가하는 방법

각도 재료 설계에서 도구 설명에 선 구분을 추가하는 방법

툴팁에 줄 바꿈을 추가하는 방법 툴팁을 구현했지만 여러 줄 바꿈 또는 줄 바꿈을 툴팁에 추가할 수 없습니다.아래는 내 코드입니다.

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로 하드코드했는지 모르겠어요.이 변경으로 인해 다른 툴팁이 파손되지 않았는지 확인해야 합니다.

또는 이 사용 사례에 특정하게 적용할 수 있습니다. 예를 들어, 예를 들어tt-multilineCSS에서 타깃으로 할 수 있습니다.

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

각도 재료 버전이 1.1.2보다 크므로 간단히 덮어쓸 수 있습니다..md-tooltip클래스:
(JSFiddle)

.md-tooltip {
    height: auto;
}

---

And if you want to style a particular tooltip, add a custom class to md-tooltip element:
( 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 버전에서 테스트한 경우

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

md-timeouttip(v0.11.4) 스타일링은 다음 URL에서 확인할 수 있습니다.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;
  }
}

또는 를 사용할 수 있습니다.white-space: pre-line;md 툴팁의 커스텀클래스에 표시됩니다.:)

가변 콘텐츠에서 솔루션을 검색한 후:

.ts

public matTooltipContent: string = 'Line 1 comment\nLine 2 comment\nLine 3 comment'

.disclosed(비활성화)

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

stackblitz의 예를 참조

사용하고 있다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*/     
}

도움이 되었으면 좋겠는데..

각진 재료 도구 팁이 div의 모든 내용을 뒤틀어서 이것이 작동합니다.

<md-tooltip class="tooltip-multiline" md-direction="left">
          This is tooltip
</md-tooltip>

.tooltip-multiline div{
  height: auto;
}

언급URL : https://stackoverflow.com/questions/33293599/how-to-add-line-breaks-within-tooltip-in-angular-material-design