Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tooltips for {{paper-input}} #1087

Open
Oreoz opened this issue May 31, 2019 · 2 comments
Open

Tooltips for {{paper-input}} #1087

Oreoz opened this issue May 31, 2019 · 2 comments

Comments

@Oreoz
Copy link

Oreoz commented May 31, 2019

Hi there!

I'm trying to implement a tooltip feature for the paper-input component. I'm not able to get it to render when placed inside of the label tag. When I move it out of the label tag it renders without any problems.

Is there any reason for this? I've tried playing around with various css properties without any success.

image

{{#if label}}
  <label for={{inputElementId}} class={{if required "md-required"}}>
    {{label}}

    {{#if tooltip}}
      {{#paper-icon "info"}}
        {{#paper-tooltip position="right"}}{{tooltip}}{{/paper-tooltip}}
      {{/paper-icon}}
    {{/if}}
  </label>
{{/if}}

Cheers!

@heberuriegas
Copy link

heberuriegas commented Jun 3, 2019

Try to wrap label + paper-icon within the paper-tooltip.

@Shadowere
Copy link

Shadowere commented Jun 4, 2019

The issue with the tooltip not rendering when inside the label tag was because of pointer-events:none; on the label. Fixed using this:

md-input-container label md-icon {
  pointer-events: auto;
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants