Md-Tooltip benutzerdefinierte Klasse hinzufügen

Question

Ich bin neu zu eckigen MD, so ist dies wahrscheinlich eine dumme Frage, aber ich kann es nicht herausfinden. Ich möchte eine Klasse "leadTimeTooltip" zu md-Tooltip hinzufügen und Stil in CSS-Datei wie diese, aber es funktioniert nicht:

.leadTimeTooltip{ 
 
    height: auto !important; 
 
    width:auto !important; 
 
    white-space: inherit !important; 
 
    font-size: 12px !important; 
 
    background-color: rgba(247,247,247,0.85); 
 
    color: black; 
 
}

<md-tooltip md-delay="600" class="leadTimeTooltip"> 
 
    <pre class="leadTimePre">{{partVm.leadTimeExplanation}}</pre> 
 
</md-tooltip> 
 
          

jedoch folgende Arbeiten:

md-tooltip ._md-content { 
 
... 
 
}

Aber ich will nicht alle Tooltips, Stil, nur die, die mit leadTimeTooltip Klasse, so habe ich versucht, die folgenden, nicht funktioniert:

md-tooltip ._md-content .leadTimeTooltip{ 
 
... 
 
}

Wer weiß, was ich falsch mache? Bitte helfen, danke!

Answer 1

Wenn Sie pre Tag verwenden möchten, haben Sie den md-Tooltip innerhalb div oder button oder span Element (nicht p) Komponente. Dann können Sie Ihre Vorlage sein:

<div>Hover over me 
    <md-tooltip md-delay="600" class="leadTimeTooltip"> 
     <pre class="leadTimePre">{{tooltipContent}}</pre> 
    </md-tooltip> 
</div> 

Hier Link für Plunker arbeiten CSS-Eigenschaften zum Inhalt bestimmter Tooltip hinzuzufügen: https://plnkr.co/edit/R2iIr9bMlS5nONpJuRc4?p=preview