googlearchive/core-tooltip

Polymer tooltip (DEPRECATED. See https://elements.polymer-project.org/elements/paper-tooltip)

core-tooltip

See the component page for more information.

core-tooltip's Issues

max-width and multiline

When the content of the tooltip is too long compared to the screen width, part of the text is hidden.
Is it possible to add a max-width to avoid this ? (using multiple lines for example)

Links aren't clickable in the tooltip

That might be on purpose, but the "pointer-events: none" in the css file prevents that one can click on the tags in the tooltip, as stated here: https://stackoverflow.com/questions/25544571/link-inside-polymer-core-tooltip

Add delay show on option for desktop and mobile

Related: http://stackoverflow.com/questions/26557744/polymer-core-tooltip-transitioning-visiblitity

On mobile, core-tooltip should latch onto press/active that core-focusable gives us.

Cannot force tooltip to hide

I would like to force the tooltip to hide, reverse of what the "show" property does.

My scenario is that I have a paper-dropdown that opens up over a tooltip. The dropdown does not cover the tooltip so it shows through the dropdown. So I want some way of hiding the tooltip until the dropdown closes.

the position is not good when the tooltip is in an animatedpage

in the first page page
controlWidth = 26
controlHeight = 40
toolTipWidth = 80
toolTipHeight = 46

in any others pages
controlWidth = 0
controlHeight = 0
toolTipWidth = 0
toolTipHeight = 0

Not working properly with display: inline;

Migrate to using core-focusable

We should migrate this element to using https://github.com/Polymer/core-focusable/ now that the paper counterpart you were using has been deprecated.

Handle dynamic updates to position

Currently, if the position attribute changes from bottom/top -> left/right the CSS left/right properties stick around. This makes the tooltip now appear in the correct location.

The fix is to reset these values to their initial state when a switch is made.

tipAttribute is not working properly

From @saan1984 on January 26, 2015 14:39

tipAttribute is not working when it takes value other then htmlooltip.
For example,

<core-tooltip tipAttribute="abcd">
  <div>Example of a rich information tooltip</div>
  <div abcd>
       ...
  </div>
</core-tooltip>

Copied from original issue: Polymer/polymer#1126

Sizing does not work on IE11

Die width of #tooltip is just some 10px on the IE and hence the inner tooltip elements are wider than the background element. A fix for this is

tooltip {

width: 100%;
}

so even IE understands to make the #tooltip as wide as the <div tip>.

Tooltip doesn't disappear when mousing away of a button that's been clicked

It seems that the tooltip is displayed whenever the element it wraps has focus. This means that if you click a button inside of core-tooltip, the tooltip won't go away even after you move the mouse away. It would be great to change the behavior so that the tooltip only shows on hover.

Where's 1.0 version for this element?

There's neither iron-tooltip nor paper-tooltip. Does this mean I should probably go back to using title attribute? 😢

Add ARIA role="tooltip"

Wrong left attribute calculation of tooltip

I've implemented a toolbar with several core-icon-button and tooltips. The code is as follow:

<core-tooltip label="{{i18n.formatclear}}" position="bottom">
        <core-icon-button id="clear" icon="editor:format-clear" on-tap="{{formatText}}"></core-icon-button>
</core-tooltip>

The problem here is that the tooltip is not centered below the core-icon-button but left aligned! See screenshot:

In the debugger the element.style left attribute is 0px. See:

Any suggestions why the calculation of left here is 0px instead of some negative value???

Tooltip demo returns 404 error

From @tjsavage on August 11, 2015 18:50

From @mschwart on August 5, 2015 23:53

Steps:

1. Go to https://www.polymer-project.org/0.5/docs/elements/core-tooltip.html
2. Click on Demo button

Expected: show demo screen
Result:

Error: Not Found

The requested URL /0.5/components/core-tooltip/demo.html was not found on this server.

Copied from original issue: Polymer/polymer#2216

Copied from original issue: Polymer/old-docs-site#1294

aria attributes may be incorrect

Currently the core-tooltip attribute gets the role="tooltip" attribute applied to it, but I believe this is incorrect. Shouldn't it be the div#tooltip element that needs role="tooltip" and the core-tooltipe element should have aria-describedby="tooltip"?

I understand that that relying on the tooltip id of the div#tooltip element in the shadow dom may not work in any user agents, because most accessibility user agents don't consider non-unique IDs (a la shadow dom). This was just an issue I wanted brought up.

Tooltip stays visible when content button/element is released [mobile]

Using 0.5.2 on a Nexus 9 stable channel Chrome.

I have a <core-tooltip> that hosts <core-item> and <paper-icon-button> both have the same problem.

I like that on touch/press and hold it shows the tooltip, I think this is good behavior. The user can still move his finger out if he wishes to not act on the element. But when the touch/tap is released on the element the tooltip wont hide.

On desktop the tooltip hides once you move your mouse from the element but on mobile you need to click/tap/touch somewhere else on the screen to hide the tooltip. Actually just moving your finger does not hide it, you need to tap a screen location (I guess removing the focus from the tooltip content). Very annoying for the user experience.

Any possibility this mobile release event could be detected form the <core-focusable> the tooltip extends? Is this a bug in there? Seems the button/item release event comes fine as the tap on it is recognized.

I know I could do some JS hack where I detect click/tap events and go through all my elements tooltips and hide them, but this is quite some work for something that I would expect to just work.

Thanks :)

disabled attribute causes nested elements to be disabled

Let's say I want to show the tooltip only when the password is incorrect. invalidLogin is false by default, so the core-tooltip is disabled but then the paper-inputelement is also disabled!

<core-tooltip  flex label="Password is incorrect" position="right" disabled?="{{!invalidLogin}}" show>
  <paper-input-decorator label="Password" floatingLabel="true">
    <input id="password" is="core-input" type="password" value="{{password}}" />
  </paper-input-decorator>
</core-tooltip>

Allow customizing the `tip` attribute

Similar to core-selector, users should be able to custom the attribute used to specify tooltip html content.

Support disabled attribute

The tooltip should not appear on hover or with keyboard access.

Setting width of tooltip window?

For longer description text it's necessary to set the width of the tooltip window to limit the width of the window. Otherwise the tooltip will stretch itself over the whole screen which does not increase the readability.

Thanks.

core-tooltip is open when menu is open when used with a paper-menu-button

See http://stackoverflow.com/questions/26415879/core-tooltip-is-open-when-menu-is-open-when-used-with-a-paper-menu-button

and http://jsbin.com/saziziwixu/2/edit?html,output

If you go to the jsbin and click on the menu you can observe that the tooltip still shows

Lack of transition violates material design principles

core-tooltip should have some kind of transition when it appears, such as a fade-in or expand.

Sizing is done at "attach" time

The core-tooltip centers itself as soon as it's attached to the DOM. That's too early
for certain cases; in AngularJS for example, it binds data to the DOM after the DOM is attached. As a result, the tooltip's size (really, its location) is not computed at the right time. A workaround was to call setPosition after Angular populated the DOM.

Tooltip hides when child element gains focus

Because of the tabindex attribute of core-tooltip, activating a control using keyboard requires an extra TAB key press. Pressing ENTER to activate the control when tooltip is visible does nothing as the focus is with tooltip. Pressing another TAB at this point, hides the tooltip and takes the focus to actual control. So, pressing ENTER activates the control now.

Removing the tabindex attribute from core-tooltip and adding listeners for focus and blur events in capture mode, to show/hide the tooltip solves this focus issue. With this, there is also a need to override disabledChanged method of core-focusable so that it doesn't add tabindex attribute to it.

The handlers for the events would look like this:

  onBlur: function(e) {
    this.classList.remove('core-tooltip-focused');
  },

  onFocus: function(e) {
    if (!this.pressed) {
      this.classList.add('core-tooltip-focused');
    }
  }

Css class core-tooltip-focused can then set the visibility of the tooltip.

Clicking on any item with a tooltip "selects" it and puts a blue border around it.

http://www.polymer-project.org/components/core-tooltip/demo.html

You can see the behavior there. However, it's really noticeable when you have two paper-icon-buttons, one with a tooltip and one without. They behave completely different, which they shouldn't.

Consider "title" instead of "label"

Tooltips are improvements on the native functionality of the "title" attribute, i.e. show a message on a long enough hover (on a platform with a pointer). Using native/standard "title" instead of the custom "label" gives fallback functionality and keeps the API familiar to someone who knows HTML.

Missing component page

Adding a tooltip to an element whose parent has overflow:hidden can obscure portions of the tooltip when displayed

If an element with a tooltip is contained within an element whose overflow is hidden the tooltip may not be visible, or may be only partially visible. It will be clipped to the bounds of the parent.

An example codepen is at : http://codepen.io/awk/pen/RNgbEN

Removing the overflow:hidden style attribute isn't practical for our current layout (unfortunately).

Bootstrap tooltips have an option (which we use) to add the tooltip to the <body> however this feels excessive and would lead to lots of shadow-dome on the body element in our case since we have a toolbar which dozens of icons and associated tooltips.

(See also: https://groups.google.com/d/msgid/polymer-dev/0cbc3453-d47a-41cd-b1d0-dd0cae61a346%40googlegroups.com)