Knockout-popover: простой байндинг Twitter Bootstrap Popover для KnockoutJS

Предлагаю вашему вниманию простой custom binding для KnockoutJS для реализации popover'ов из Twitter Bootstrap.

Демо

Единичный случай использования

<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>

Вариант использования 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>

Группа popover'ов

<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>

Поддержка Options

Плагин поддерживает все опции, описанные на странице popover'а

Ссылки

Исходники на github

Автор: AKhalilov

Источник