Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

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

Closed
tilsammans opened this Issue · 6 comments

4 participants

@tilsammans

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?

@tilsammans

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
  %span.nub

and then the coffeescript magic:

# show a tooltip on focus
$('input')
  .on 'focus', ->
    $(this)
      .next('.tooltip')
      .css(display: 'inline')
  .on 'blur', ->
    $(this)
      .next('.tooltip')
      .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?

@mrsweaters
Owner

I am. :)

@proimage

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
@mrsweaters
Owner

@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
@tilsammans

Ah, got it. :beer:

@Jeloi

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) {
$(this).mouseenter();
}).on('blur', function(event) {
$(this).mouseout();
});

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.