javascript - 容器中的工具提示 chop

Question

我正在使用 Bootstrap 工具提示，它们目前在我的页面上被切断了。我删除了 overflow-x 属性以尝试确保工具提示可见，但它们仍然被切断:

我已经查找了一些可能的解决方案，但我无法将工具提示的位置设置为固定或更改工具提示的父级，因为它们需要随容器中的元素一起滚动:

https://www.youtube.com/watch?v=qoNkpFAHr0o&feature=youtu.be

这是我添加工具提示的方式:

$('#step_name').tooltip(
{
    title: "1. Add step title",
    placement: "left",
    container: ".editDetailView",
    trigger: "manual",
    position: "absolute"
});
$('#uploadMedia').tooltip(
{
    title: "2. Upload images/videos",
    placement: "left",
    container: ".editDetailView",
    trigger: "manual",
    position: "absolute"
});
$('.detailViewText').tooltip(
{
    title: "3. Add step description",
    placement: "left",
    container: ".editDetailView",
    trigger: "manual",
    position: "absolute"
});
$('.update_step_button').tooltip(
{
    title: "4. Click to create step",
    placement: "bottom",
    container: ".editDetailView",
    trigger: "manual",
    position: "absolute"
});

这是容器元素的 CSS:

.processBlog{
    position: absolute;
    overflow: auto;
    form{
        overflow: auto;
        .stepDetailView{
           overflow-y: auto;
           .editDetailView{
               position: relative;
               overflow-y: hidden;
             }
            }
        }
}

Answer 1

这可以通过 JS 或通过 data-container 属性来修复

JS方法

$(element).tooltip({
         title: "Some text",
         container: "body"
});

使用数据容器示例

<a href="#" data-toggle="tooltip" 
            data-placement="top"
            data-container="body" 
            title="I am a tooltip">Tooltip</a>