Show tooltip only on overflow

[cschleiden]

Exploration 2 of #1433, don't focus on details yet, difference between exploration 1 and 2 is in Tooltiphost

No changefile, will update once we decide on a direction

[mdahamiwal]

we are checking for horizontal overflow. we shall name it accordingly ?

[cschleiden]

Yep, see Exploration 1 :)

[mdahamiwal]

Any reason why we are keeping "isOverflowing" as a state? how about checking for overflow only on mouseEnter? Seems like we are doing a lot of computation during react lifecycle which may be triggered by parent's state change and produce same result for isOverflowing.

[cschleiden]

Desired use case:

[cschleiden]

@dzearing @micahgodbolt want to bubble this up again. Reaching out of the component seems a bit weird, but for ease of use reasons I don't see a better way. We could pull this into a different component, or leave it in TooltipHost, don't feel very strongly either way.

[micahgodbolt]

@cschleiden yeah, this doesn't feel quite right. Mostly because we'll have a ton of other scenarios where we might want to conditionally show a tooltip, and we wouldn't want to cram them into this component.

I like your overflow utility. Would it be easy enough to make this overflow state something we could easily put on a label, or whatever other component might use it, then maybe have a flag on tooltip that would suppress the tooltip unless the label was overflowed

TL:DR

1. Add "suppress" to the tooltip props
2. Add "overflowed" state/decorator to items that we have overflowing text.

This way we could do many things (including showing a tooltip) if the text is overflowing.

[micahgodbolt]

Add "suppress" to the tooltip props
Add "overflowed" state/decorator to items that we have overflowing text.

[cschleiden]

@micahgodbolt I don't quite understand. How would I mark an element as containing overflow? I don't want to force people to do something like this:

Before: Example problem scenario:

Some shared component:

.gridCell {
  overflow: hidden;
  white-space: no-wrap;
  text-overflow: ellipsis; 
}

<div className="gridCell">
  {content}
</div>

Usage of that shared component:

const renderCell = () => <span>My text goes here</span>;

After: Example problem scenario:

Some shared component:

.gridCell {
  overflow: hidden;
  white-space: no-wrap;
  text-overflow: ellipsis; 
}

<OverflowComponent className="gridCell" tagName="div">
  {content}
</OverflowComponent>

Usage of that shared component:

const renderCell = () => <TooltipHost content="My tooltip goes here" suppressIfNoOverflow={ true }><span>My text goes here</span></TooltipHost>;

where OverflowComponent would use context for example to communicate with TooltipHost.. I think that's too heavy.

---

I mean if we decide that this is not a problem for other teams, I can contribute the overflow utils for now (I think these a not controversial) and keep an OverflowTooltipHost in VSTS for our use case. It's a tooltip, it shouldn't take re-architecting a whole control/page to include it :)

[cschleiden]

Okay, we could do something like https://github.com/OfficeDev/office-ui-fabric-react/blob/99589edbaff0a68e9c3c6097a3b7be8d058d7c18/packages/utilities/src/scroll.ts#L55 where we set a data-has-overflow attribute, that wouldn't require context, but still a nice way to attach that element to a parent.

Also, broke out the overflow changes into #1509

[Edit]:
@micahgodbolt Sorry, I meant:
we would still need a way to find out whether something has overflow, and then how to attach that data- attribute. I don't see an easy way to do that, unless there is some <Overflow mode={OverflowMode.Ellipsis}> .... </Overflow> component which I'm not sure I want to create.

dimissed original remove

[cschleiden]

Updated for latest changes.

Alternative might be to fork TooltipHost for a OverflowTooltipHost?

[cschleiden]

@hross This is the PR I just mentioned.

[cschleiden]

@micahgodbolt @dzearing @hross I'd like to move forward with this as soon as possible, we really need that in VSTS.

[micahgodbolt]

I have no major objections.

[hross]

Per our convo I'd definitely like a delegate to override. I think parent is okay...

enum OverflowMode{ None, Self, Parent }

overflowBehavior: OverflowMode | (tooltipHostElement: Element) => boolean;

[cschleiden]

Now we just need a better namefor the overflowBehavior property:

enum OverflowMode{ None, Self, Parent }
overflowBehavior: OverflowMode | (tooltipHostElement: Element) => boolean;

[cschleiden]

Busy remainder of the week, will work on this next week.

[cschleiden]

Closing for now, will reopen next week after exploring the overflowBehavior a bit

[cschleiden]

@hross if you want to have another look