angularjs - कोणीय सामग्री डिजाइन में टूलटिप के भीतर लाइन ब्रेक कैसे जोड़ें




tooltip angular-material (5)

टूलटिप में लाइन ब्रेक कैसे जोड़ें मैंने टूलटिप को लागू किया है लेकिन मैं टूलटिप में मल्टी लाइन या लाइन ब्रेक को जोड़ने में सक्षम नहीं हूं। बेलो मेरा कोड

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

आप यहाँ md-tooltip (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;
  }
}

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

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

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

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

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

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

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

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

और विशिष्ट वर्ग के लिए

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

मैं angular_material 1.1.8 का उपयोग कर रहा हूं, क्योंकि मेरे लिए एक भी उत्तर काम नहीं आया, एक संयोजन ने किया।

एचटीएमएल

<md-tooltip class="tooltip-multiline">Years ago, when I was backpacking...</md-tooltip>

सीएसएस

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

आशा करता हूँ की ये काम करेगा..


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


कोणीय-सामग्री संस्करण> 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 संस्करणों में परीक्षण किया गया







angular-material