Dynamically position css tooltip

Question

I have a tooltip solution developed in HTML + CSS:

HTML part:

<a href="#" class="tooltip">
Tooltip
<span>
    <strong>Light-weight CSS Tooltip</strong><br />
    This is the easy-to-use Tooltip driven purely by CSS.<br/>
    And this is some additional text 
    <br/><br/><br/>
    More additional text
</span>

CSS:

a.tooltip {outline:none;}
a.tooltip strong {line-height:30px;}
a.tooltip:hover {text-decoration:none;}
a.tooltip span {
       z-index:10;
       display:none;
       padding:14px 20px;
       margin-top:-50px;
       margin-left:28px;
       width:70%;
       line-height:16px;}

a.tooltip:hover span {
       display:inline;
       position:absolute;
       color:#111;
       border:1px solid #DCA;
       background:#fffAF0;}

a.tooltip span {
       border-radius:4px;
       box-shadow: 5px 5px 8px #CCC;}

This works very well with an exceptions: If the span displaying the tooltip is to far down on the bottom of the window then the user wont see the whole tooltip.

Is there a way to somehow dynamically position this tooltip so its contents all the time when he hovers to the span?

(I am an absolute rookie in html, so please answer keeping this in mind)

UPDATE: would it be possible to display the tooltip always at the middle of the screen? That would not be a solution for the original problem, but would be a solution for me.

Answer 1

I'm afraid that CSS does not allow you to detect tooltip's position, and because of that, you can't make dynamic alignments using pure CSS. What you can do though is, if you know that the element is near the bottom, add one more class to such element beside tooltip that would position <span> within it differently.

Answer 2

I think you probably will need to use some javascript/jquery there.
Take a look at this post:
Detect if dropdown navigation would go off screen and reposition it

The problem is similar to yours, but with a dropdown.

Answer 3

Tooltip using JavaScript/JQuery

WORKING DEMO

HTML

<span id="tooltip1" class="tooltip">
    <strong>Light-weight CSS Tooltip</strong><br />
    This is the easy-to-use Tooltip driven purely by CSS.<br/>
    And this is some additional text 
    <p> More additional text </p>
</span>


<a href="#" class="tooltip1" style="border: 1px solid red;">
Tooltip
</a>

CSS

body {
    overflow:scroll margin:0px;
}
span {
    z-index:10;
    padding:14px 20px;
    width:auto;
    line-height:16px;
    display:inline;
    position:absolute;
    top:50px;
    color:#111;
    border:1px solid #dca;
    background:#fffAF0;
    border-radius:4px;
    box-shadow: 5px 5px 8px #CCC;
    opacity:0.5;
    overflow:auto;
}
a {
    text-decoration:none;
    position:absolute;
    bottom:500px;
    /* Change as per your wish it will still work*/
    left:800px;
    /* Change as per your wish it will still work*/
}

JavaScript/JQuery

$(".tooltip").hide(); // On very first line of scripts.js file


$("a").hover(function () {
    var elems = this;
    var curClass = elems.className // current class clicked.
    var windowHeight = $(window).height();
    var windowWidth = $(window).width();

    var left = elems.offsetLeft;
    var top = elems.offsetTop;
    var linkHeight = $("." + curClass).height();
    var linkWidth = $("." + curClass).width();
    var bottom = windowHeight - top - linkHeight;
    var right = windowWidth - left - linkWidth;
    var topbottom = (top < bottom) ? bottom : top;
    var leftright = (left < right) ? right : left;

    var tooltiph = $("#" + curClass).height();
    var tooltipw = $("#" + curClass).width();

    if (topbottom == bottom && leftright == right) //done
    {
        var yPos = top;
        var xPos = left + linkWidth + 10;
        $("#" + curClass).css("top", yPos + "px");
        $("#" + curClass).css("left", xPos + "px");
    } else if (topbottom == bottom && leftright == left) //done
    {
        var yPos = top;
        var xPos = right + linkWidth + 10;
        $("#" + curClass).css("top", yPos + "px");
        $("#" + curClass).css("right", xPos + "px");
    } else if (topbottom == top && leftright == right) //done
    {
        var xPos = left + linkWidth + 10;
        var yPos = top - tooltiph - (linkHeight / 2);
        $("#" + curClass).css("top", yPos + "px");
        $("#" + curClass).css("left", xPos + "px");
    } else if (topbottom == top && leftright == left) {
        var yPos = top - tooltiph - (linkHeight / 2);
        var xPos = left - tooltipw - linkWidth;
        $("#" + curClass).css("top", yPos + "px");
        $("#" + curClass).css("left", xPos + "px");
    } else {}

    $(".tooltip").fadeIn('fast');
},

function () {
    $(".tooltip").fadeOut('fast');
});

Answer 4

Maybe I'm a little bit(around 7 years) late but, here is a fun idea:

Theoretically you can now solve this issue with position: sticky; bottom:0; on the tooltip.