cách hiển thị chú giải công cụ khi di chuột?

Question

tôi xác định tooltip bootstrap của tôi như thế này:

<button popover-template="myPopoverTemplate.html" data-trigger="hover" popover-title="{{dynamicPopover.title}}" class="btn btn-default">Popover With Template</button> 

mẫu của tôi trông như thế này:

<div>{{dynamicPopover.content}}</div> 
<div class="form-group"> 
    <label>Popup Title:</label> 
    <input type="text" ng-model="dynamicPopover.title" class="form-control"> 
</div> 

Vấn đề là các tooltip không showup trên di chuột?

plunkr ref: http://plnkr.co/edit/G1Cet74mVCkVYvdXRxnX?p=preview

Answer 1

@Leeuwtje, trong tài liệu tham khảo plunkr mà bạn đã đính kèm, có một popover được mở về sự kiện mouseenter (khi bạn di chuột qua nút).

Thuộc tính để làm điều đó không phải là data-trigger="hover", nhưng popover-trigger="mouseenter".

Ngoài ra, đối với mẫu popover-template="dynamicPopover.templateUrl" được thêm làm thuộc tính cho phần tử kích hoạt nó.

Ngoài ra, nếu bạn cần phải thêm tiền tố các thuộc tính với data-, làm cho họ như thế này:

<button data-popover-template="" data-popover-trigger="" /></button> 

Các popover tiền tố để -template hoặc -trigger trong popover-trigger và popover-template làm cho nó một chỉ thị ui góc, do đó loại bỏ popover- sẽ làm cho nó không hợp lệ/vô nghĩa với ui góc.

EDIT

Lý do các popover-template đã không làm việc là bởi vì nó hy vọng một biến như giá trị thuộc tính.

Thay thế:

popover-template="myPopovertemplate.html" 

bởi

popover-template="'myPopovertemplate.html'" 

Thêm tên tập tin trong dấu ngoặc kép hiện các trick.

Chúng tôi đặt url mẫu trong các dấu nháy đơn để nó trở thành một biến hợp lệ. Đó là lý do tại sao các nút khác trên trang trong chức năng plunk, bởi vì chúng có giá trị popover-template là các biến được xác định trong $scope.

plunk: http://plnkr.co/edit/oEA5ekXDV5DSw6yoSHMd?p=preview

Hy vọng điều này giúp!