jeremy jeremy - 12 days ago 11
CSS Question

How to make Anchor tag show the title without making it clickable

So I've created a little help thing using an anchor tag so that when users hover over the "?" they can see a little box with some instructions on it. It works well but when users click on the "?" link it will go to the top of the page. So I am wondering if there is a way to disable that event from happening…

HTML:

<a class="questions" href="#" title="instructions are here">?</a>


CSS:

.questions:link{
color:#fff;
background-color:#feb22a;
width:12px;
height:12px;
display:inline-block;
border-radius:100%;
font-size:10px;
text-align:center;
text-decoration:none;
-webkit-box-shadow: inset -1px -1px 1px 0px rgba(0,0,0,0.25);
-moz-box-shadow: inset -1px -1px 1px 0px rgba(0,0,0,0.25);
box-shadow: inset -1px -1px 1px 0px rgba(0,0,0,0.25);
}


I've tried to use things like this but it disables the instructions from coming up.

This:

.not-active {
pointer-events: none;
cursor: default;
}

Answer

The title attribute is a global attribute so you can use it on other elements, like a span for example, which won't cause a jump:

<span class="questions" href="#" title="instructions are here">?</span>