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.

If I got a script then it is, then I will try to integrate it to my page (without fully understanding it, but thats ok for me). — Istvanb, Jun 17 '15 at 22:35

score 2 · Answer 1 · answered Jun 19 '15 at 18:02

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

When I run the working demo in Chrome, nothing happens. There is a blank white area. Clicking Run does nothing. — David Spector, Aug 16 '23 at 15:52

score 1 · Answer 2 · answered Jun 17 '15 at 20:49

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.

answered Jun 17 '15 at 20:49

Wojciech Maj

982
6
21

Unfortunately this is not an option for me as I have a long list of items and each one should have its own tooltip. The number of items are large enough that the user must scroll up and down in his browser window, so what was at the bottom of the screen at one point can be at the top of the screen in the other second. – Istvanb Jun 17 '15 at 20:54
1

It's definitely time for JavaScript, sorry! – Wojciech Maj Jun 17 '15 at 20:57

score 1 · Answer 3 · answered Jan 10 '22 at 16:36

1

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.

answered Jan 10 '22 at 16:36

Gökhan Mete ERTÜRK

3,378
2
19
23

Doesn't seem to answer the question. All this does is stick the tooltip in one place in the viewport; there are also performance issues with repainting it. This doesn't determine the direction in which to render the tooltip. – David Spector Aug 16 '23 at 15:55
position:sticky doesn't stick the tooltip in one place in the viewport. Maybe try checking [this](https://developer.mozilla.org/en-US/docs/Web/CSS/position) out. Just make sure the container of the tooltip is big enough. – Gökhan Mete ERTÜRK Aug 18 '23 at 07:48

score 0 · Answer 4 · edited May 23 '17 at 12:14

0

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.

edited May 23 '17 at 12:14

Community

1
1

answered Jun 17 '15 at 21:00

King Clauber

39
10

Dynamically position css tooltip

4 Answers4