ui.bootrap (प्लंकर संलग्न) के टूलटिप तीर का रंग बदलें

Question

यहां प्लंकर कोड है। http://plnkr.co/edit/C1khFJqTUutDaK9ad7ud?p=preview

मुझे टूलटिप तीर को बदलने की आवश्यकता है। उदाहरण में टूलटिप्स की स्थिति शीर्ष, नीचे और बाएं है।

क्या कोई मुझे बता सकता है कि इन टूलटिप्स को कैसे शैलीबद्ध किया जाए। टूलटिप के विभिन्न स्थानों के लिए मुझे टूलटिप तीर को अलग-अलग रंगना होगा।

, उदा,

tooltip at top-> arrow color should be red 
tooltip at bottom-> arrow color green 
tooltip at left-> arrow color yellow 

कोई मुझे पता है उन वर्गों और इन टूलटिप्स में रंग लागू करने के लिए कैसे करते हैं कर सकते हैं के लिए

।

यहाँ कोड

एचटीएमएल

<div ng-controller="TooltipDemoCtrl"> 
<br><br><br> 
    <div ng-class="{'has-error' : !inputModel}"> 
    <input type="text" ng-model="inputModel" class="test" 
     uib-tooltip="Tooltip TBD" 
     tooltip-placement="top" 
     tooltip-trigger="mouseenter" 
     tooltip-enable="!inputModel" /> 
    </div> 
</div> 

सीएसएस

.tooltip .tooltip-inner { 
      color: white; 
      background-color: blue; 
      border-radius:5px; 
} 

.tooltip .tooltip-arrow { 
      //cant get the class for the arrow 

} 

Answer 1

इस प्रयास करें, उदाहरण के शीर्ष

.tooltip.top .tooltip-arrow { 
    border-top-color: red!important; 
} 

Answer 2

के लिए बतास के संबंध में जवाब अपडेट किया जा रहा है। यह मेरे लिए काम किया।

.tooltip.top .tooltip-arrow { 
border-top-color: red!important; 
} 
.tooltip.bottom .tooltip-arrow { 
border-bottom-color: green!important; 
} 
.tooltip.left .tooltip-arrow { 
border-left-color: yellow!important; 
} 

Answer 3

आप tooltip-class उपयोग कर सकते हैं मैंने पाया यह अधिक सुविधाजनक हो करने के लिए
http://plnkr.co/edit/FVTuepTS7gXL3K2ixR8e?p=preview

एचटीएमएल:

<div ng-controller="TooltipDemoCtrl"> 
<br><br><br> 
    <div ng-class="{'has-error' : !inputModel}"> 
    <input type="text" ng-model="inputModel" class="test" 
     uib-tooltip="Tooltip TBD" 
     tooltip-class="tooltip-class" 
     tooltip-trigger="mouseenter" 
     tooltip-enable="!inputModel" /> 
    </div> 
</div> 

सीएसएस

.tooltip-class .tooltip-arrow{ 
    border-top-color: red !important; 
}