CODEWITHSUNDEEP
javascriptcsstwitter-bootstrapbootstrap-modalsummernote
Ray_Hack
Ray_Hack

Reputation: 981

Summernote tooltips not appearing in a bootstrap Modal window

I am trying to implement the Summernote WYSIWYG editor in a bootstrap modal window. The problem I am getting is that the tooltips on hover do not appear when I do this in a modal. (works fine without modal). What appears to happen is sometimes you can see just behind the modal window there is the edge of the tooltip border, making me think that they are behind the window. I tried targeting the tooltip and changing its Z-index to 9999 but that did not work. Please could you help me figure out where I am going wrong. 

<!--################### Bootstrap Modals With Forms DESCRIPTION ##########################-->                    
<!-- <button class="btn-u" data-toggle="modal" data-target="#responsive">Launch Button</button> -->
<div class="modal fade sky-form blackform" data-backdrop="static" id="descriptionform" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content col-md-12" style="min-width:490px;">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">Project Description</h4>
            </div>
            <div class="modal-body" >
                <div class="row">
                    <!-- <div class="modal-body"> -->
                    <!-- ################CONTENT FOR MODAL#################### -->
                    <div class="col-lg-12">
                        <form action="PR_detailsform.php" method="post" id="projdescription">
                            <input type="hidden" name="idkey" value="<?php echo $Pkey; ?>">
                            <input type="hidden" name="catx" value="<?php echo $cat; ?>">
                            <input type="hidden" name="navx" value="<?php echo $nav; ?>">
                            <div class="form-group">
                                <label for="">Edit</label>
                                <textarea name="details" id="summernote" rows="10" class="form-control"><?php echo $projectdetail; ?></textarea>
                            </div>
                            <button style="background:#72c02c;color: white;" type="button" class="btn btn-submit" onClick='submitDescriptionForm()'>Submit</button>
                            <button type="button" class="btn btn-submit" data-dismiss="modal">Cancel</button>
                            <!-- <input type='button' value='Save Project' class="btn-u btn-u-primary" onClick='submitDetailsForm2()' /> -->
                        </form>
                    </div>
                    <!-- ##################END MODAL CONTENT################ -->
                    <!-- </div> -->
                </div>
            </div>
        </div>
    </div>
</div>
<!-- ################End Bootstrap Modals With Forms #########################-->

Upvotes: 1

Views: 4122

Answers (2)

Dennis Kuijpers
Dennis Kuijpers

Reputation: 23

I will be completely honest. I found this code on internet explaining this would help out with tooltips. Completely forgot to save the site where I found this but it works like a charm.

    $(document).on("show.bs.modal", '.modal', function (event) {
    // console.log("Global show.bs.modal fire");
    var zIndex = 100000 + (10 * $(".modal:visible").length);
    $(this).css("z-index", zIndex);
    setTimeout(function () {
        $(".modal-backdrop").not(".modal-stack").first().css("z-index", zIndex - 1).addClass("modal-stack");
    }, 0);
}).on("hidden.bs.modal", '.modal', function (event) {
    // console.log("Global hidden.bs.modal fire");
    $(".modal:visible").length && $("body").addClass("modal-open");
});
$(document).on('inserted.bs.tooltip', function (event) {
    // console.log("Global show.bs.tooltip fire");
    var zIndex = 100000 + (10 * $(".modal:visible").length);
    var tooltipId = $(event.target).attr("aria-describedby");
    $("#" + tooltipId).css("z-index", zIndex);
});
$(document).on('inserted.bs.popover', function (event) {
    // console.log("Global inserted.bs.popover fire");
    var zIndex = 100000 + (10 * $(".modal:visible").length);
    var popoverId = $(event.target).attr("aria-describedby");
    $("#" + popoverId).css("z-index", zIndex);
});

I hope this is useful for you as well.

Upvotes: 1

hm27
hm27

Reputation: 111

i have faced the similar issue, in modal popup it also show scroll bar (css issues)while showing tooltip to solve that.. try to use default browser tooltip (title attribute), modify your summernote.js file and add title attribute

My Summernote.js file - version 0.5.1 for example: 

bold: function (lang) {
            return '<button type="button" class="btn btn-default btn-sm btn-small" title="' + lang.font.bold + '" data-shortcut="Ctrl+B" data-mac-shortcut="⌘+B" data-event="bold" tabindex="-1"><i class="fa fa-bold icon-bold"></i></button>';
        },
        italic: function (lang) {
            return '<button type="button" class="btn btn-default btn-sm btn-small" title="' + lang.font.italic + '" data-shortcut="Ctrl+I" data-mac-shortcut="⌘+I" data-event="italic" tabindex="-1"><i class="fa fa-italic icon-italic"></i></button>';
        },
        underline: function (lang) {
            return '<button type="button" class="btn btn-default btn-sm btn-small" title="' + lang.font.underline + '" data-shortcut="Ctrl+U" data-mac-shortcut="⌘+U" data-event="underline" tabindex="-1"><i class="fa fa-underline icon-underline"></i></button>';
        },

Hope this will help you

Upvotes: 1

Related Questions