j_uk j_uk - 6 months ago 65
CSS Question

Uib-popover should show limited characters

I have an uib-popover which is currently showing 4000 characters. How can I display 100 characters only(like textoverflow property) in that popover?
Please find the screenshot attachedenter image description here as well.

here is my html code:

<i class="{{::prefix}}_TableCol_PrescriptionList_Notes_Text_OfficeComments fa fa-comment"
ng-show="prescription.officeNotes && showComments" uib-popover="Office Comments: {{ prescription.officeNotes }}" popover-placement="top"
popover-trigger="mouseenter" popover-animation="0"
ng-click="!prescription.disabledDueToSPM && showIconData(prescription, $event, 'officeNotes')"></i>

Here is my css file code:

.popover.top {
margin-top: -5px !important;
font-size: 9pt;
max-width: 500px !important;


For the attribute on your HTML tag, use limitTo:

uib-popover="Office Comments: {{ prescription.officeNotes | limitTo : 100 }}"