CSS / jQuery: How to prevent tooltip from disappearing behind border of main wrapper (working code)

Question

I am new to CSS and hope someone can help me with this.

I am trying to create a tooltip for on-hover display. It needs to be able to show HTML content so I cannot use the title attribute approach and I don't want to use a plugin for this.

So far I have the below which works in general, i.e. the layout and content is as intended and it appears on hover etc. However, I am facing one problem here that I cannot figure out myself:
If I test this on a smaller screen size then a part of my tooltip disappears behind the right border of my main page wrapper so half of the tooltip gets hidden behind that.

Is there a way that I can set this so that the tooltip width goes max till the right border of the main wrapper and then extends its height instead of its width ? I tried using overflow and z-index here but still couldnt' get this to work. On the other hand I had to use white-space: nowrap as otherwise I am getting tooltips with a large height but very small width.

My CSS:

.tooltip {
    display: inline;
    margin: 0;
    padding: 0;
    position: relative;
}
.tooltip span {
    background: blue;
    border-radius: 10px;
    box-shadow: 2px 2px 3px #666;
    color: #fff;
    height: auto;
    min-height: 30px;
    position: absolute;
    text-align: left;
    visibility: hidden;
    white-space: nowrap;
    width: auto;
}
.tooltip span:after {
    border-bottom: 8px solid transparent;
    border-right: 8px solid blue;
    border-top: 8px solid transparent;
    content: '';
    height: 0;
    margin-top: -8px;
    position: absolute;
    right: 100%;
    top: 16px;
    width: 0;
}
.tooltip:hover span {
    left: 100%;
    margin-left: 15px;
    margin-top: -15px;
    filter: alpha(opacity=100);
    opacity: 1;
    padding: 8px 16px;
    top: 50%;
    visibility: visible;
    z-index: 999;
}

Sample HTML:

<div class="col-12 tooltip">
    <input type="text" required />
    <span>
        <strong>Some text</strong><br />
        <ul>
            <li> Some text</li>
            <li> Some text</li>
            <li> Some text</li>
            <li> Some text</li>
        </ul>
    </span>
</div>

Update:
If jQuery is the better approach for this please let me know as well.

Many thanks in advance, Mike

Answer 1

Try to use @media:

Here's the JsFiddle link.

E.g.

@media (max-width: 350px) {
    .tooltip span:after {
        border-left: 8px solid transparent;
        border-bottom: 8px solid blue;
        border-right: 8px solid transparent;
        content: '';
        height: 0;
        position: absolute;
        left: 30%;
        top: -8px;
        width: 0;
    }

    .tooltip:hover span {
        left: 0;
        margin-top: 20px;
    }
}

Just change the styles of tooltip class inside the @media.

Hope it helps.