如何在懸停時顯示工具提示？

我定義我的引導提示是這樣的：如何在懸停時顯示工具提示？

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

我的模板看起來是這樣的：

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

問題是提示不懸停showup？

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

來源

2015-07-10 Leeuwtje

@Leeuwtje，在已連接的plunkr參考，存在被上MouseEnter事件打開（當將鼠標懸停按鈕）一個酥料餅。

要做的那個屬性不是data-trigger="hover"，而是popover-trigger="mouseenter"。

另外，對於模板popover-template="dynamicPopover.templateUrl"作爲屬性添加到觸發它的元素。

另外，如果你需要前綴data-屬性，做他們是這樣的：

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

的popover前綴在popover-trigger-template或-trigger和popover-template使得它的角UI指令，以便消除popover-會使其對角度用戶界面無效/無意義。

編輯

的popover-template沒有工作的原因是因爲它需要一個變量作爲屬性值。

更換：

popover-template="myPopovertemplate.html"

通過

popover-template="'myPopovertemplate.html'"

添加引號中的文件名的伎倆。

我們把模板URL放在單引號中，所以它變成了一個有效的變量。這就是plunk函數中頁面上的其他按鈕的原因，因爲它們的popover-template值是在$scope中定義的變量。

普拉克：http://plnkr.co/edit/oEA5ekXDV5DSw6yoSHMd?p=preview

希望這有助於！

來源

2015-07-10 05:36:28

欣賞的努力，但是當我懸停仍然不顯示:(改變plunkr咯：http：//plnkr.co/edit/G1Cet74mVCkVYvdXRxnX？p =預覽 – Leeuwtje

@Leeuwtje你希望模板是'myPopoverTemplate.html'對吧？ –

@Leeuwtje對不起，我沒有意識到要求，增加了編輯和一個新的普樂克，希望它有幫助！ –

如何在懸停時顯示工具提示？

回答

相關問題