Issue with tooltip in bootstrap modal dialogue

[parwej ahamad]

I am opening Moda dialogue and then binding Tooltip on one link. On mouse hover, Tooltip displaying correctly but when hiding the tooltip then Modal Dialogue closing automatically.

Please could suggest me where is the issue?

//Html Model Dialogue

<div class="modal fade hide" data-bind="viewSheet: selectedBus" id="divModel">

    <div class="modal-header">

        <button class="close" data-dismiss="modal">x</button>

        <h3 data-bind="text : Travel"></h3>

        <a rel="tooltip" href="#" data-toggle="tooltip" data-placement="right" 

                data-bind="attr : {title : Travel}">

            <i class="icon-info-sign"></i></a>

            Cancellation Policy

    </div>

    <div class="modal-body">

        <input  />

    </div>

    <div class="modal-footer">

        <a href="#" data-dismiss="modal">Close</a>

    </div>

</div>

Knockout custom binding to show the Modal

ko.bindingHandlers.viewSheet = {

    init: function (element, valueAccessor) {

        var data = valueAccessor();

        //make sure that we clear the observable no matter how the modal is closed

        $(element).modal({ show: false }).on("hidden", function () {

            if (ko.isWriteableObservable(data)) {

                data(null);

            }

        });

        //wrap the real "with" binding

        return ko.bindingHandlers["with"].init.apply(this, arguments);

    },

    update: function (element, valueAccessor) {

        var data = ko.utils.unwrapObservable(valueAccessor());

        //show or hide the modal depending on whether the associated data is populated

        $(element).modal(data ? "show" : "hide");

        $(element).on('shown', function () {

            //$(element).find("[rel='tooltip']").popover();

            $(element).find("[rel='tooltip']").tooltip();

        });

        //wrap the real "with" binding

        return ko.bindingHandlers["with"].update.apply(this, arguments);

    }

};

[Greg Merideth]

Your tooltip is using the (bootstrap I assume) tooltip close of

<button class="close" data-dismiss="modal">x</button>

and your modal dialog box uses

<a href="#" data-dismiss="modal">Close</a>

Your using the same mechanism to close the modal window as the toolip, that's why it closes both.

[parwej ahamad]

Thanks Greg, but even I removed the both element (close) but still it's closing.

Thanks,

Parwej

--
You received this message because you are subscribed to the Google Groups "KnockoutJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to knockoutjs+...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Greg Merideth]

Appears it's a known issue and there is a work around here.

https://github.com/twitter/bootstrap/issues/6942

[parwej ahamad]

Thanks Gred, now it's working. I changed the bootstrap.js file as suggested in workaround.

May be it will help to someone.

bootstrap.js

Line no : 1080

var Tooltip = function (element, options) {

     this.init('tooltip', element, options);

     $(element).on('show', function(e) {

               e.stopPropagation();

        }).on('hidden', function(e) {

           e.stopPropagation();

        });

   }

Line no: 1445

   Tooltip.prototype = {

   var Popover = function (element, options) {

    this.init('popover', element, options);

     $(element).on('show', function(e) {

               e.stopPropagation();

        }).on('hidden', function(e) {

           e.stopPropagation();

        });

   }

Regards,

Parwej