How to make a link clickable but also not?

Question

So I'm working on my webshop and doing the final points to make it all good looking.

I thought you know what'd be cool? If there was a questionmark which said what you can search for. So few seconds later there it was.... but... you can't hover on mobile so I thought. Cheap fix. make it clickable. Which turns out wasn't a cheap fix because if you click on it, it links you to the top of the page. How do I make it that the popover is clickable, but leads to nowhere and also doesn't refresh the page or annything?

I got this so far:`

    <form method="GET" action="search.php#shop" class="navbar-form navbar-right">
      <a href="#" title="Zoektermen" data-toggle="popover" data-trigger="focus" data-placement="left" data-content="U kunt zoeken op land, beschrijving, naam en merk."  >
        <p class="fa fa-question"></p>
      </a>
      <input id="form" name="id" type="text" placeholder="Producten zoeken" class="form-control" />
      <button type="submit" class="btn btn-primary">Zoekresultaten tonen</button>
    </form>
</div>

`

Kinda stuck here so help will be appreciated! Thanks in advance P.S. Don't mind the text. It's Dutch :P

The script is:

<script> $(document).ready(function(){ $('[data-toggle="popover"]').popover(); }); </script>

Answer 1

First give it an id or class

<a href="#"  id="popover_button" title="Zoektermen" data-toggle="popover" data-trigger="facous" data-placement="left" data-content="U kunt zoeken op land, beschrijving, naam en merk."  ></a>

Than disable the functionality with jQuery

<script type="text/javascript">
$('#popover_button').click(function(e){
    e.preventDefault();
});
</script>