Tooltips cutoff in container

Question

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

Answer 1

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>

Answer 2

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.com/javascript/#tooltips-options

Before/After Photo