angularjs - example - Cómo agregar saltos de línea dentro de información sobre herramientas en diseño de material angular

md list item

Question

Cómo agregar salto de línea en la información sobre herramientas He implementado la información sobre herramientas pero no puedo agregar líneas múltiples o saltos de línea en la información sobre herramientas. A continuación, mi código

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

Agregar este CSS parece funcionar en su caso (con la <br> s):

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

No estoy seguro de por qué Angular-Material codificó duro la altura a 22px. Deberá verificar si este cambio interrumpe otras informaciones sobre herramientas.

O puede aplicarlo específicamente a este caso de uso solo asignándole una clase, por ejemplo, tt-multiline , para que pueda orientarlo en CSS:

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

Editar: comenzando desde Angular-Material 1.1, algunos nombres de clases han cambiado para comenzar con un guión bajo.

En este caso, use

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

y para una clase específica

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

Answer 2

Como la versión de material angular> 1.1.2 puede anular simplemente la clase .md-tooltip :
( JsFiddle )

.md-tooltip { height: auto; } Y si desea aplicar un estilo a una información sobre herramientas determinada, agregue una clase personalizada al elemento md-tooltip :
( jsFiddle )

HTML

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

CSS

.tooltip-multiline {
  height: auto;
}

ambos casos probados en versiones de material angular 1.1.2, 1.1.3 y 1.1.4

Answer 3

Eso fue lo que hice. Ahora hará saltos de línea automáticos o incluirá un <br> . Establezca los max-with de abajo para lo que necesite.

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

O puede usar white-space: pre-line; en la clase personalizada de su información sobre herramientas md. :)

Answer 5

Puede ver el estilo de md-tooltip (v0.11.4) aquí: https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.11.4/angular-material.css

Mi propio texto se sobreescribe al estilo del diseño de materiales para permitir una bonita sugerencia de información sobre varias líneas:

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