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"
});

使用data-container示例

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

Answer 2

尝试设置工具提示的容器选项：

$(element).tooltip({
         title: "Title",
         container: "#calendar"
});

注意：您希望使用容器上方的容器切断图像。

请参阅此处的选项：http://getbootstrap.com/javascript/#tooltips-options

照片之前/之后

Answer 3

这可能是你的问题：position: "absolute"

为什么不使用data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom"

<input type="text" name="text" data-toggle="tooltip" data placement="bottom" title="Tooltip on bottom">

用

初始化它

<script>
    $(function () {
        $('[data-toggle="tooltip"]').tooltip()
    })
</script>

Answer 4

尝试将工具提示方向更改为右侧？这是一个按钮的示例。

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>

更多信息here

容器中的工具提示截止

4 个答案: