Как добавить разрывы строк в всплывающей подсказке в дизайне материалов angular

Как добавить разрыв строки в подсказку Я внедрил всплывающую подсказку, но я не могу добавить несколько строк или разрывов строк в 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; }

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

Ответ 1

Добавление этого CSS, кажется, работает в вашем случае (с <br> s):

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

Я не уверен, почему Angular -Материал жестко закодировал высоту до 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;
}

Ответ 2

Поскольку версия angular-material> 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

Ответ 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;
  }
}

Ответ 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;
}

Ответ 5

Или вы можете использовать white-space: pre-line; в пользовательском классе вашей md tooltip.:)

Ответ 6

Я использую 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*/     
}

Надеюсь, поможет..

Ответ 7

угловой инструмент подсказки материала деформирует все содержимое в div, так что это его работа

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

.tooltip-multiline div{
  height: auto;
}