CODEWITHSUNDEEP
htmlcssanchortitle
jeremy
jeremy

Reputation: 433

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

Upvotes: 2

Views: 4310

Answers (3)

molls223
molls223

Reputation: 1436

In case you aren't already using jquery or don't want to include the jquery library just for this, you can always use plain javascript to prevent the click behavior:

<a href="javascript:void(0)">

Upvotes: 1

DEEPAK KUMAR CHOUDHARY
DEEPAK KUMAR CHOUDHARY

Reputation: 66

@jeremy hey, you can use jquery to prevent the default action of the anchor tag

<script>
    $(function () {
        $('a .questions').on("click", function (e) {
             e.preventDefault();
        });
    });
</script>

<!-- html code here -->

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

Upvotes: 2

j08691
j08691

Reputation: 207901

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>

Upvotes: 4

Related Questions