Rails link_to: click but stay in place, do not jump to top of page

Question

I have a link_to in my rails app. It functions as a tooltip. When the user hovers over the link: It displays some helper text.

If the user accidentally clicks the tooltip: I do not want the default behavior of jumping to the top of the page. I know with javascript I could preventDefault, but is there an easy rails way to get this same behavior?

I was thinking of remote: true but it still jumps to the top of the page.

Code:

<%= link_to "#", title: 'my helper text', remote: true do %>
  <i class="fa fa-question-circle"></i>
<% end %>

score 4 · Accepted Answer · answered Nov 07 '16 at 21:53

4

Using an empty anchor will result in scrolling to the document start, as you've experienced. Specifying a non-existent anchor, however, will result in no change in scroll position. For example:

<a href="#doesnotexist">Stay Here</a>

This will still change the document URL and the browser history, though, which is a worse user experience.

For links that shouldn't change the page, such as those handled via JS, you should absolutely use progressive enhancement and prevent the browser action in JS with the most appropriate method (e.g., return false or e.preventDefault).

If you have tooltips that should not actually link anywhere, perhaps it would be best to change them into another inline element, such as span.

answered Nov 07 '16 at 21:53

coreyward

77,547
20
137
166

I would add that your anchor target *should* exist. You could give the link an ID and use the same ID as the link in the href. – Karl Wilbur Nov 08 '16 at 04:22
Having the JavaScript `return false` and `preventDefault()` on the event should stop things from getting that far anyway. – Karl Wilbur Nov 08 '16 at 04:29
1

YES, YES, YES! Don't use a link unless you *need* a link. `span` is a much better choice. – Karl Wilbur Nov 08 '16 at 04:30

score 0 · Answer 2 · edited May 23 '17 at 12:01

0

I ended up using an <a> tag along with onclick="return false;" As suggested in this answer.

If you have a better solution please share:

<a onclick="return false;" data-toggle="tooltip" data-html="true" title="<%= my_helper_text%>”><i class="fa fa-question-circle"></i></a>

edited May 23 '17 at 12:01

Community

1
1

answered Nov 07 '16 at 21:45

Neil

4,578
14
70
155

You should not be using `onclick`. While that was acceptable in 1996, that is considered bad practice in 2016. – Karl Wilbur Nov 08 '16 at 04:20

score 0 · Answer 3 · answered Nov 08 '16 at 04:15

0

In circumstances like this, I've usually been successful in using nil.

<%= link_to nil, title: 'my helper text' %>
  <i class="fa fa-question-circle"></i>
<% end %>

After some research, I'm seen a few people claim that javascript:; is what should be used, but I haven't experienced any issues using nil.

answered Nov 08 '16 at 04:15

celly

74
4

Never, ever, ever use `javascript:;` it is invalid. – Karl Wilbur Nov 08 '16 at 04:21
Karl, I don't know anything about `javascript:;` so i don't know why it is so bad. I just know when i was researching some answers help the question poster, **MANY** of them mentioned using that line of code. Can you please expound a to why it is a bad idea to use `javascript:;` – celly Nov 10 '16 at 02:27
1

No worries, here you go ... `javascript:` is not a valid protocol (it is a "*psudo*-protocol"), thus is not a valid URL. *Some* browsers may support it, but that doesn't make it valid. Having read the RFCs and the HTML specifications, I can assure you that it is not valid. Microsoft *does* support it though: https://msdn.microsoft.com/en-us/library/aa767736(v=vs.85).aspx ) Mozilla supports it but it is discouraged: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/void – Karl Wilbur Nov 13 '16 at 20:23
Some other SO refs: http://stackoverflow.com/questions/2321469/when-do-i-need-to-specify-the-javascript-protocol and http://stackoverflow.com/questions/10068781/what-does-the-javascript-pseudo-protocol-actually-do – Karl Wilbur Nov 13 '16 at 20:24

score 0 · Answer 4 · answered Nov 08 '16 at 04:27

Unless you need an actual link, don't use an anchor element. Use the proper HTML element. This this case, you should use a span element.

You should be able to do this:

<span data-toggle="tooltip" data-html="true" title="<%= my_helper_text%>”><span class="fa fa-question-circle"></span></span>

or maybe even this:

<span data-toggle="tooltip" data-html="true" title="my helper text" class="fa fa-question-circle"></span>

Rails link_to: click but stay in place, do not jump to top of page

4 Answers4