web-dev-qa-db-fra.com

Comment ajouter des sauts de ligne dans l'info-bulle dans la conception de matériau angulaire

Comment ajouter un saut de ligne dans une info-bulle J'ai implémenté l'info-bulle, mais je ne parviens pas à ajouter des sauts de ligne multiples dans tooltip.Below est mon code

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 = {};
});
angularjstooltipangular-material
42
apps4any

Ajouter ce CSS semble fonctionner dans votre cas (avec le <br>s):

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

Je ne suis pas sûr de savoir pourquoi Angular-Material a codé en dur la hauteur à 22px. Vous devrez vérifier si cette modification ne casse pas les autres info-bulles.

Ou vous pouvez l’appliquer spécifiquement à ce cas d’utilisation uniquement en lui attribuant une classe, par exemple. tt-multiline, vous pouvez donc le cibler en CSS:

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

Edit: à partir de Angular-Material 1.1, certains noms de classe ont été modifiés pour commencer par un trait de soulignement.

Dans ce cas, utilisez

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

et pour une classe spécifique

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

Depuis angular-material version> 1.1.2, vous pouvez simplement remplacer la classe .md-tooltip: 
( JsFiddle )

.md-tooltip {
    height: auto;
}

Et si vous voulez styler une info-bulle particulière, ajoutez une classe personnalisée à l'élément md-tooltip:
( jsFiddle ) 

HTML

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

CSS

.tooltip-multiline {
  height: auto;
}

les deux cas sont testés dans les versions 1.1.2, 1.1.3 et 1.1.4 à matériau angulaire

10
The.Bear

C'est ce que j'ai fait. Maintenant, il va faire des sauts de ligne automatiques ou mettre un <br> dans ça. Définissez le max-with ci-dessous sur tout ce dont vous avez besoin.

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
kenny

Vous pouvez afficher le style de md-tooltip (v0.11.4) ici: https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.11.4/angular-material.css

Ma propre écriture remplace le style de conception des matériaux pour permettre aux info-bulles multilignes à la recherche de Nice:

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

Ou vous pouvez utiliser white-space: pre-line; dans la classe personnalisée de votre info-bulle md. :)

3
iQhry

pointe d'outil matériel angulaire déforme tout le contenu dans div de sorte que cela fonctionne 

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

.tooltip-multiline div{
  height: auto;
}
0
Murali

J'utilise angular_material 1.1.8, pour moi, la réponse simple ne fonctionnait pas, une combinaison fonctionnait.

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*/     
}

J'espère que ça aide..

0
Lakshan S