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:

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

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./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;
             }
            }
        }
}

• javascript
• jquery
• html
• css
• twitter-bootstrap

• Can you send a link to the page where this problem occurs or at least create a jsfiddle? – ray9209 Commented Aug 29, 2015 at 16:29
• @scientiffic is this issue fixed? If yes please consider accepting one solution as accepted answer.... – kiranvj Commented Dec 14, 2019 at 5:23

4 Answers 4

This can be fixed either with JS or via data-container attribute

JS method

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

Using data-container example

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

Try setting the container option for the tooltip:

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

Note: You'd want to use a container that is above the container cutting off the image.

See the options here: http://getbootstrap./javascript/#tooltips-options

Before/After Photo

This is probably your problem: position: "absolute"

Why not use 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">

And initialize it with

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

Try to change the tooltip direction to the right? Here is an example for a button.

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

More information here