📜 ⬆️ ⬇️

Knockout-popover: A Simple Binding of Twitter Bootstrap Popover for KnockoutJS

I bring to your attention a simple custom binding for KnockoutJS for implementing popovers from Twitter Bootstrap.

Demo

Single use case

<span data-bind="popover: true" class="ko-popover" data-popover-placement="bottom" data-popover-title="knockout-popover" data-popover-content="Awesome knockout-popover plugin"> knockout-popover (hover over me :) </span> 


Use case popoverOptions

 <span class="ko-popover" data-bind="popover: true, popoverOptions: { title: 'JS driven title' }" data-popover-placement="bottom" data-popover-content="Awesome knockout-popover plugin"> popoverOptions will override 'data-' attribute values </span> 

Group popover'ov

 <p data-bind="popover: false, popoverOptions: { elem: '.ko-popover'}"> This is example of how to enable <span class="ko-popover" data-popover-title="knockout-popover: multiple popovers" data-popover-content="Multiple popovers by single knockoutjs binding"> knockout-popovers </span> for all <span class="ko-popover ko-popover-info" data-popover-placement="right" data-popover-title="So, do you like it?" data-popover-content="knockout-popover with custom CSS class"> child elements </span>, that have the defined class. </p> 

Support Options

The plugin supports all options described on the popover page.
')
Links

Sources on github

Source: https://habr.com/ru/post/213847/


All Articles