CODEWITHSUNDEEP
htmlcsstooltip
stf
stf

Reputation: 621

How to make HTML+CSS tooltip appear on top (avoid clip)?

I am trying to create a simple tooltip using just HTML+CSS. Here is what I have:

HTML:

<div>
    <span>some text</span>
    <span id="tooltip">some (1) longer (2) text (3)...</span>
</div>

CSS:

div {
    position: relative;
    background-color: lightgreen;
}

span#tooltip {
    display: none;
    position: absolute;
    left: -10em;
    background-color: yellow;
    z-index: 1000;
}

div:hover span#tooltip {
    display: block;
}

Unfortunately, the tooltip gets clipped. How to make it appear on top of everything?

http://jsfiddle.net/z9seu/

It gets clipped in this jsfiddle, in my case that is in a table in a div whatever, and gets clipped also.

Thanks!

Upvotes: 0

Views: 4523

Answers (2)

Frank Conijn - Support Ukraine
Frank Conijn - Support Ukraine

Reputation: 3190

As discussed in the comments under the question, a light-weight HTML + CSS + (vanilla/native) Javascript tooltip that should solve the OP's problem, and work on touchscreens at the same time. Here is the live demo.

And this is the code: 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Light-weight Tooltip by FC</title>
<style>
html {
    font-size: 62.5%;
}
body {
    font: normal 1.3em Verdana;
    background-color: white; /* just for the JSBin demo */
}
h2 {
    text-align: center;
    margin-bottom: 2em;
}
span.tool {
    position: relative;
    display: inline-block;
    border-bottom: 1px dashed black;
}
span.tool:hover {
    cursor: help;
}
span.tip {
    position: absolute;
    bottom: 20px;
    left: 0px;
    display: block;
    width: auto;
    white-space: nowrap;
    font-size: .9em;
    border: 0px solid black; /* change as desired */
    border-radius: 6px;
    padding: 1px 5px;
    background: #eee;
    background: linear-gradient(top, #eee, #ccc);
    background: -moz-linear-gradient(top, #eee, #ccc);
    background: -o-linear-gradient(top, #eee, #ccc);
    background: -webkit-linear-gradient(top, #eee, #ccc);
    background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ccc));
    background: -ms-linear-gradient(top, #eee, #ccc);
    filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#eeeeee,EndColorStr=#cccccc);
    zoom: 1;
    visibility: hidden;
}
</style>
</head>
<body>

    <h2>Light-weight Tooltip by FC</h2>

    <p>The <span class="tool">WHO<span class="tip">World Health Organization</span></span> was established in 1948.</p>

    <p>
        It is part of the
        <span class="tool">UN
            <span class="tip">United Nations, <br>the successor of the <br>League of Nations</span>
        </span>,
        which was established in 1945.
    </p>

    <hr>

    <p>Explanation and 'minds':</p>

    <ul>
        <li>The method consists of local nested spans ('tools' with 'tips' inside), positioned relative-absolute.</li>
        <li>If the same tips are to be used several times throughout the page or website, the tip spans can be populated centrally with Javascript or server-side scripting.</li>
        <li>In the current code the width of the tips is set to <i>auto</i>, and controlled with &lt;br&gt;s in the tip text. Change to fixed width as desired.</li>
        <li>With the current code tablet users must tap (= <i>onclick</i>) rather than press-hold (= <i>onmousedown</i>). It is assumed that that is the intuitive thing most tablet users do, but it can be changed to press-hold.</li>
        <li>The HTML is valid and the code works in IE8 as well.</li>
        <li>It is said that <i>getElementsByClassName(class)</i> returns a dynamic node list, whereas <i>querySelectorAll(.class)</i> would return a static one. That would make the latter unsuited for dynamically updated elements/sections. Also, it is said to be slower/require more CPU power than the first. However, <i>querySelectorAll(.class)</i> is supported by IE8 (not 7). Mind the dot.</li>
        <li>For the sake of completeness: IE9 does not form a border-radius when the element has no declared border, or a border-width of 0.</li>
    </ul>

<script>
// Primer script to make IE8 support getElementsByClassName:
if (!document.getElementsByClassName) {
    document.getElementsByClassName = function(theClass) {
        var elemArray = [];
        var elems = this.getElementsByTagName('*');
        for (var i=0; i<elems.length; i++) {
            var allClasses = elems[i].className;
            var classRegex = new RegExp('^('+theClass+')$|(\\s'+theClass+'\\b)');
            // pattern demo on http://codepen.io/anon/pen/Hhswl?editors=100
            if (classRegex.test(allClasses) == true)
                elemArray.push(elems[i]);
        }
        return elemArray;
    }
}
// End primer script


var tools = document.getElementsByClassName('tool');
for (var i=0; i<tools.length; i++) {
    var tool = tools[i];
    if ('ontouchstart' in window || (window.DocumentTouch && document instanceof DocumentTouch)) {
        tool.onclick = function() {
            if (this.children[0].style.visibility == '' || this.children[0].style.visibility == 'hidden')
                this.children[0].style.visibility = 'visible';
            else 
                this.children[0].style.visibility = 'hidden';
        }
    }
    else {
        tool.onmouseover = function() {
            this.children[0].style.visibility = 'visible';
        }
        tool.onmouseout = function() {
            this.children[0].style.visibility = 'hidden';
        }
    }
}
</script>
</body>
</html>

.
If matters are not fully self-explanatory (after some study...), just let me know via a comment.

Upvotes: 0

Cheruvian
Cheruvian

Reputation: 5867

The issue is with your 

left: -10em;

If you remove that line (or make it a positive value), the full length of your text appears.

Since you are making it absolute, it moves it out of the screen.

Upvotes: 4

Related Questions