CODEWITHSUNDEEP
ruby-on-railsruby
Neil
Neil

Reputation: 5178

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

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 %>

Upvotes: 3

Views: 2675

Answers (4)

Neil
Neil

Reputation: 5178

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

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

Upvotes: 0

Karl Wilbur
Karl Wilbur

Reputation: 6207

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>

Upvotes: 0

celly
celly

Reputation: 74

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.

Upvotes: 0

coreyward
coreyward

Reputation: 80100

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.

Upvotes: 4

Related Questions