容器中的工具提示

Question

我正在使用Bootstrap工具提示，它們目前正在我的頁面上被截斷。我刪除溢出-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

這可能是你的問題：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 2

嘗試將工具提示方向更改爲正確的方向？ 這裏是一個按鈕的例子。

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

更多信息here

Answer 3

嘗試設置容器選項工具提示：

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

注意：您想使用的容器是容器切斷圖像上方。

在這裏看到的選項：http://getbootstrap.com/javascript/#tooltips-options

前/後的照片