Simple tooltip box

Simple tooltip css without using JavaScript
Simple CSS code for tooltip box over link-hovering. (Source CodePen)

Please put your mouse pointer over any link, blue-colored, in this page to find something different. I have tried and found a simple way how to show a nicer tooltip box for the link hover. The coding is simple because of no JavaScript involvement.

This is a Blogger site. So I have to log into blogger.com first. Successful login will make my eyes cling to the 'administration page' or 'control panel'. I have to roll eyes and find the path:

1) Theme -> Vertical 3 dots at the top right side -> Backup

2) Theme -> customize -> Advanced -> Add CSS ->  Copy following codes and paste them into Add custom CSS

a.tooltip{
    position:relative;
    }
    a.tooltip:hover{
    text-decoration:none;
    }
    a.tooltip:after{
    content: attr(tip);
    font-family:Arial, Helvetica, sans-serif;
    font-size:90%;
    line-height:1.2em;
    color:#fff;
    width:200px;
    padding:5px 10px;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
    background:#c00d3f;
    background:-webkit-linear-gradient(#c00d3f, #7b0a2a);
    background:-moz-linear-gradient(#c00d3f, #7b0a2a);
    background:-o-linear-gradient(#c00d3f, #7b0a2a);
    background:-ms-linear-gradient(#c00d3f, #7b0a2a);
    background:linear-gradient(#c00d3f, #7b0a2a);
    -moz-box-shadow: 3px 3px 4px rgba(0,0,0, .65);
    -webkit-box-shadow: 3px 3px 4px rgba(0,0,0, .65);
    box-shadow: 3px 3px 4px rgba(0,0,0, .65);
    position:absolute;
    top:27px;
    left:-10px;
    display:none;
    }
    a.tooltip:before{
    z-index:1000;
    position:absolute;
    content:"";
    top:15px;
    left:0px;
    border-right:7px transparent solid;
    border-left:7px transparent solid;
    display:none;
    }
    a.tooltip:hover{
    z-index:1000;
    position:relative;
    color:#8325f7;
    }
    a.tooltip:hover:after{
    display:block;
    }
    a.tooltip:hover:before{
    display:block;
    }

3) Apply to Blog

4) Back to Blogger

5) Posts

Classic:

<a href="#" rel="nofollow" title="Link to the site for full text">Nice note</a>

Hovering, not clicking, makes a tooltip box appear and show the content of the "title", in this example, "Link to the site for full text."

Modified:

<a class="tooltip" href="#" rel="nofollow" tip="Link to the site for full text">Nice note</a>

Insert class="tooltip", and use "tip" instead of "title".

Is the modification a matter of curiosity? I don't know.

* Don't input target="_blank".

Code page: Tooltip HTML5 Hover

Post a Comment

Previous Post Next Post