Skip to content


Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP


has-tip doesn't work on labels and inputs #1917

tilsammans opened this Issue · 6 comments

4 participants


Adding the class 'has-tip' to a label does not show the tooltip on hover. Same for the input element itself.

Schermafbeelding 2013-03-15 om 16 43 59

What I actually wanted was a visible tooltip when the input has focus. Is there a built-in way to accomplish that?


For anyone reading at home, I got this to work quite easily using a little custom markup/JS:

= form.text_field :date_of_birth
%span.tooltip.tip-right{style: "top: 20px; left: 290px; width: 170px;"}
  Tip content

and then the coffeescript magic:

# show a tooltip on focus
  .on 'focus', ->
      .css(display: 'inline')
  .on 'blur', ->
      .css(display: 'none')

but I still think the tooltip should just work on form labels.

Any of you otherwise interested in me converting the above code into a pull request?


I am. :)


AFAIK, class="has-tip" is not what triggers the tooltip; it merely adds CSS styling to the tooltip triggering element. The property data-tooltip appears to be what triggers tooltips to actually appear on hover.

@mrsweaters mrsweaters was assigned

@proimage Indeed this is correct.

@tilsammans You will need to add data-tooltip to your input elements to get them to work. has-tip pulls in the default styles. However, in Foundation 3, has-tip is the proper way to initialize the JavaScript.

@mrsweaters mrsweaters closed this

Ah, got it. :beer:


Here is a way that I have found to be better, as it doesn't manually change the css but instead lets the default logic handle it by triggering a mouseenter/mouseout event with jquery.

$('input[data-tooltip]').on('focus', function(event) {
}).on('blur', function(event) {

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.