Question

我正在尝试在bootstrap模式窗口中实现 Summernote WYSIWYG编辑器。我得到的问题是，当我在模态中执行此操作时，悬停时的工具提示不会出现。（没有模态工作正常）。看起来有时你可以看到模态窗口后面有工具提示边框的边缘，让我觉得它们在窗口后面。我尝试将工具提示作为目标并将其Z-index更改为9999，但这不起作用。请你帮我弄清楚我哪里出错了。

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

Answer 1

我遇到了类似的问题，在模态弹出窗口中它还显示滚动条（css问题），同时显示工具提示来解决这个问题。尝试使用默认浏览器工具提示（title属性），修改您的summernote.js文件并添加标题属性

我的Summernote.js文件 - 版本0.5.1 例如：

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>';
        },

希望这会对你有所帮助

Answer 2

我将完全诚实。我在互联网上找到了这段代码，解释了这将有助于使用工具提示。完全忘了保存我发现该问题的网站，但它的作用就像是一种魅力。

    $(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);
});

我希望这对您也有用。

Summernote工具提示未出现在引导模式窗口中

2 个答案: