कोणीय सामग्री डिजाइन

Question

टूलटिप में लाइन ब्रेक जोड़ने के लिए मैं कैसे टूलटिप लागू कर दिया है, लेकिन मैं बहु लाइन या tooltip.Below में पंक्ति विराम जोड़ने के लिए सक्षम नहीं हूँ में टूलटिप के अंतर्गत लाइन ब्रेक कैसे जोड़ें मेरी कोड है

http://codepen.io/apps4any/pen/RWQLyr

एचटीएमएल

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

सीएसएस:

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

Answer 1

इस सीएसएस जोड़ना (<br> रों) के साथ अपने मामले में काम करने के लिए लगता है:

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

मैं क्यों कोणीय-सामग्री ऊंचाई 22px करने के लिए हार्ड-कोडेड यकीन नहीं है। आपको यह जांचना होगा कि क्या यह परिवर्तन अन्य टूलटिप्स को तोड़ता है या नहीं।

या आप इसे विशेष रूप से इस वर्ग के मामले में इसे एक वर्ग देकर लागू कर सकते हैं, उदा। tt-multiline, ताकि आप इसे सीएसएस में लक्षित कर सकते हैं:

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

---

संपादित करें: कोणीय-सामग्री 1.1 से शुरू, कुछ वर्ग के नाम एक अंडरस्कोर से शुरू करने के लिए बदल गया है।

इस मामले में उपयोग करने

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

और विशिष्ट वर्ग

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

Answer 2

आप MD-टूलटिप (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; 
    } 
} 

Answer 3

जो मैंने किया वह करता है। अब यह स्वचालित लाइन ब्रेक करेगा या इसमें <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; 
} 

Answer 4

कोणीय-भौतिक संस्करण> 1.1।2 आप बस ओवरराइड कर सकते हैं .md-tooltip वर्ग:
(JsFiddle)

.md-tooltip { 
    height: auto; 
} 

---

और आप एक विशेष टूलटिप शैली, md-tooltip तत्व के लिए एक कस्टम वर्ग को जोड़ने चाहते हैं:
( jsFiddle)

एचटीएमएल

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

सीएसएस

.tooltip-multiline { 
    height: auto; 
} 

दोनों ही मामलों 1.1.2, 1.1.3 और 1.1.4 संस्करणों

Answer 5

या फिर आप अपने md टूलटिप के कस्टम कक्षा में white-space: pre-line; उपयोग कर सकते हैं कोणीय-सामग्री में परीक्षण किया गया। :)