Display Hover instead of Href for conditional check

Question

I have a very basic html requirement where on some parameter value, I need to hide the hyperlink on the text and show the hover on the text.

Below is my test html.How should I handle my Javascript where when accesscode =10, I should show only hover not href?

<!DOCTYPE html>
<html>

<body>
<h1>test Heading</h1>
<p>Test screen.</p>

 <a id="tagUrl" class="button" href='https://growthModeltest.com' target="_blank" rel="MonthlyReport">Learn More</a>

</body>
<script>
var accessCode= 10;
var hideElem = document.getElementById("tagUrl");
if(accessCode == 10){
        //should not display the link, instead show the hover.
        hideElem.href = '#';
}

</script>
</html>

I moved the script at the bottom but my question still is, how to display the href conditional. I need to show hove instead of href for certain param value. — MSV, Mar 14 '19 at 02:00
@epascarello my requirement is to show the hyperlink for some user roles only. If the user doesnt have specific privileges instead of showing the hyperlink, i want to show hover saying that 'Link is not available for you' — MSV, Mar 14 '19 at 04:32

score 1 · Answer 1 · answered Mar 14 '19 at 02:31

1

If you want to create a tooltip that's displayed when you hover over the link, assign the title property.

var accessCode = 10;
var hideElem = document.getElementById("tagUrl");
if (accessCode == 10) {
  //should not display the link, instead show the hover.
  hideElem.href = '#';
  hideElem.title = 'Link is not active now';
}

<h1>test Heading</h1>
<p>Test screen.</p>

<a id="tagUrl" class="button" href='https://growthModeltest.com' target="_blank" rel="MonthlyReport">Learn More</a>

answered Mar 14 '19 at 02:31

Barmar

596,455
48
393
495

thanks for the update but I still do not want user to click on the link when accessCode ==10. hideElem.href = '#'; will still take user to next window. Basically I want to disable the link and show hover on it. – MSV Mar 14 '19 at 03:58
1

@MSV did you try that snippet? Clicking the link won't redirect the user anywhere – VilleKoo Mar 14 '19 at 08:04

score 1 · Accepted Answer · answered Mar 14 '19 at 17:45

First remove target="_blank" as well from the link and if you do not want user to redirect to top of the page. You can use javascript:void(0) inside href tag to avoid this

Try this:

var accessCode = 10;
var hideElem = document.getElementById("tagUrl");
if (accessCode == 10) {
  //should not display the link, instead show the hover.
  hideElem.href = 'javascript:void(0)';
  hideElem.removeAttribute('target');
  hideElem.title = 'Link is not active now';
}

<h1>test Heading</h1>
<p>Test screen.</p>

<a id="tagUrl" class="button" href='https://growthModeltest.com' target="_blank" rel="MonthlyReport">Learn More</a>

score 0 · Answer 3 · answered Mar 14 '19 at 07:59

Try to make a test with code below.

<html>
<head>
    <title>Disable Link using JavaScript</title>
</head>
<body>
  
<h1>test Heading</h1>
<p>Test screen.</p>

 <a id="tagUrl" class="button" href='https://growthModeltest.com' target="_blank" rel="MonthlyReport">Learn More</a>

</body>
 
<script>
    var lnk = document.getElementById('tagUrl');
    var accessCode = 10;
 if (accessCode == 10) {
 lnk.title="'Link is not available for you";
    if (window.addEventListener) {
        document.addEventListener('click', function (e) {
            if (e.target.id === lnk.id) {
    
                e.preventDefault();         // Comment this line to enable the link tag again.
            }
        });
    }}
</script>
</html>

Display Hover instead of Href for conditional check

3 Answers3