容器中的工具提示 [英] Tooltips cutoff in container

问题描述

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

这里是我如何添加工具提示：

  $（'＃step_name'）。tooltip（
 {
 title： 1.添加步标题，
 placement：left，
 container：.editDetailView，
 trigger：manual，
 position：absolute
}）; 
 $（'＃uploadMedia'）。tooltip（
 {
 title：2.上传图片/视频，
 placement：left，
 container： .editDetailView，
 trigger：manual，
 position：absolute
}）; 
 $（'。detailViewText'）。tooltip（
 {
 title：3.添加步骤描述，
 placement：left，
 container： .editDetailView，
 trigger：manual，
 position：absolute
}）; 
 $（'。update_step_button'）。tooltip（
 {
 title：4.点击创建步骤，
 placement：bottom .editDetailView，
 trigger：manual，
 position：absolute
}）; 
  

这是容器元素上的CSS：

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

解决方案

尝试添加此属性：

  position：{within：#step_name} //或'#uploadMedia'，'.detailViewText'等，每个工具提示为1 
  

I'm using Bootstrap tooltips, and they are currently being cut off on my page. I removed overflow-x properties to try to ensure that the tooltip is visible, but they are still being cut off:

I've looked up some possible solutions, but I can't set the position of the tooltips to fixed or change the parent of the tooltips because they need to scroll with the elements in my container:

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

Here is how I add the tooltips:

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

Here is the CSS on the container elements:

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

解决方案

Try adding this property:

position:{ within: "#step_name"} // or '#uploadMedia', '.detailViewText', etc, 1 for each tooltip

这篇关于容器中的工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！