feat(tooltip): support loading content lazily

EhsanKia commented 5 years ago

Proposal

Have a way to lazily load md-tooltip bodies on hover

CodePen and steps to reproduce the issue:

CodePen Demo If you look in the console, we have "test" logged a 1000 times on load.

Detailed Reproduction Steps:

Create a large list of items with tooltips
Check when the body of each tooltip is initialized

What is the expected behavior?

Tooltip only initialized when user hovers over element

What is the current behavior?

All tooltips are initialized at the start

What is the use-case or motivation for changing an existing behavior?

Large pages with thousands of elements that have complex and expensive tooltips.

Which versions of AngularJS, Material, OS, and browsers are affected?

AngularJS: 1.6.4
AngularJS Material: 1.1
OS: Ubuntu
Browsers: Chrome 69

Splaktar commented 5 years ago

By "load" here, do you mean that they should not be added to the page's DOM until they are hovered over to avoid browser performance and memory issues with large sets?

In the CodePen, I can see the following for each item:

<div ng-repeat="i in items" class="ng-binding ng-scope"
         aria-label="complex htmlhello" md-labeled-by-tooltip="md-tooltip-0">
  0
</div>

But the div .md-panel-outer-wrapper that contains the actual tooltip isn't added to the DOM until the tooltip is displayed.

Oh, I think that I see what you are asking now. It looks like you are projecting a Component into your md-tooltips instead of a string. Did you see this documented somewhere?

Our documentation and examples only show the use of a string and I don't believe that we've ever really considered this use case or officially supported it. "Expensive" tooltips are certainly not a use case that we've considered or would recommend.

Does something like md-virtual-repeat help with your issue or is there some reason that you aren't able to use it? It seems like the best solution given the limited information that I have at this time.

EhsanKia commented 5 years ago

That's fair, I do agree that I am doing something that's outside the scope of the directive, although I have to say it works really well. Is there another directive you would recommend in general for this; to show a more complex element on hover?

I actually am using it inside a virtual-repeat, which helps, but as the users scrolls, hundreds of these components are being created, even though as you mention they aren't actually added to the dom until hover.

I'm just curious how doable this is. Do you reckon it would be a simple change to delay the actual creation of the element, or that it require a lot of work. I'm also not sure if this counts as a big FR, I realize this is an older project.

If you think it's a reasonable change, that it wouldn't negatively impact existing projects and that it's something the team is ok with, I'd like to maybe give it a go. If not, I understand that it's outside the scope of the project.

Splaktar commented 5 years ago

md-tooltip is actually built on top of $mdPanel which is our generic panel implementation. It's built in a more flexible way and shouldn't have a problem with loading more complex components. I'm not 100% sure that you will have the full control that you need, but you will certainly have a lot more control than md-tooltip provides. You can also use md-tooltip as an example $mdPanel implementation.

Also see

angular / material