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




tooltip angular-material (6)

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

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

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


वही मैंने किया। अब यह ऑटोमैटिक लाइन ब्रेक करेगा या इसमें एक <br> डालेगा। नीचे दिए गए max-with सेट को कभी भी आपकी ज़रूरत के 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;
}

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

कोणीय सामग्री टूल टिप, div में सभी सामग्री को बदल रही है ताकि यह काम कर सके

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

.tooltip-multiline div{
  height: auto;
}

इस सीएसएस को जोड़ने से आपके मामले में ( <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;
}

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





angular-material