Come aggiungere interruzioni di riga all'interno di tooltip nella progettazione di materiale angolare

Come aggiungere un'interruzione di riga in tooltip Ho implementato il Tooltip ma io non sono in grado di aggiungere più di linea o interruzioni di riga in tooltip.Below è il mio codiceCome aggiungere interruzioni di riga all'interno di tooltip nella progettazione di materiale angolare

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 = {}; 
});

fonte

2015-10-23 apps4any

L'aggiunta di questo CSS sembra funzionare nel tuo caso (con i <br> s):

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

io non sono sicuro perché angolare Materiale hard-coded l'altezza a 22px. Avrai bisogno di controllare se questo cambiamento interrompe altri tooltip.

Oppure puoi applicarlo specificatamente a questo caso di utilizzo solo assegnandogli una classe, ad es. tt-multiline, in modo da poter indirizzare in CSS:

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

Edit: A partire da Angular-Material 1.1, alcuni nomi di classe sono cambiati di iniziare con una sottolineatura.

In questo caso utilizzare

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

e per la classe specifica

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

fonte

2015-10-23 03:13:33 Icycool

Per quanto posso vedere, quando si dispone di più linee, il posizionamento non funziona molto bene se è alla fine della pagina. Sto usando un pulsante con un suggerimento che si trova in cima al pulsante. – Philipp

@Icycool: ho un elemento dinamico da sottoporre a rendering come suggerimento, quindi non ho un'opzione per aggiungere
lì. Qualche idea su come mostrare il tooltip in modo che il testo renda sulla riga successiva invece di essere troncato? – user1242321

@ user1242321 È possibile controllare css 'white-space: pre' o' white-space: pre-wrap' – Icycool

È possibile visualizzare lo stile per MD-tooltip (v0.11.4) qui: https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.11.4/angular-material.css

I miei sovrascrive allo stile di progettazione del materiale per consentire suggerimenti di testo multi-linea:

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

fonte

2015-12-01 23:38:41 user5240493

Questo è quello che ho fatto. Ora eseguirà interruzioni di linea automatiche o inserirà <br> . Imposta il numero max-with qui sotto per quello che ti serve.

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

fonte

2017-03-19 07:13:29 kenny

Dal versione angolare-materiale> 1.1.2 si può semplicemente ignorare .md-tooltip classe:
(JsFiddle)

.md-tooltip { 
    height: auto; 
}

E se si desidera per lo stile un particolare tooltip, aggiungere una classe personalizzata per md-tooltip elemento:
( jsFiddle)

HTML

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

CSS

.tooltip-multiline { 
    height: auto; 
}

entrambi i casi testati in angolare materiale 1.1.2, 1.1.3 e 1.1.4 versioni

fonte

2017-04-20 01:42:01

oppure è possibile utilizzare white-space: pre-line; nella classe personalizzata del tooltip MD. :)

fonte

2017-09-19 07:22:16 iQhry

Come aggiungere interruzioni di riga all'interno di tooltip nella progettazione di materiale angolare

risposta

Problemi correlati