javascript - Summernote 工具提示未出现在 Bootstrap 模态窗口中

Question

我正在尝试在 Bootstrap 模式窗口中实现 Summernote 所见即所得编辑器。我遇到的问题是，当我在模式中执行此操作时，悬停时的工具提示不会出现。 (在没有模态的情况下工作正常)。似乎发生的是有时你可以看到模式窗口后面有工具提示边框的边缘，让我认为它们在窗口后面。我尝试定位工具提示并将其 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 问题)同时显示工具提示来解决这个问题。尝试使用默认浏览器工具提示(标题属性)， 修改你的 summernote.js 文件并添加 title 属性

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

希望对你有帮助