MaterialPaperTooltipComponent class

A paper based overlay meant to convey long-form contextual information about its target element.

The target for a tooltip card may be any element, such as a button, input, link, etc. The target may also be the help_outline icon, which acts as a proxy for the actual target.

Use this component in conjunction with the ClickableTooltipTargetDirective. Consider setting focusContents to true to improve a11y.

This component supports deferred content.

If your tooltip content is another component, use the DeferredContentDirective to load your component only when it is visible.

Supported Content:

The following selectors are automatically styled to tooltip spec:

  • header
  • footer
  • Non header/footer content is given the tooltip body style.
Implemented types
Annotations
  • @Component(selector: 'material-tooltip-card', providers: [tooltipControllerBinding, FactoryProvider(Tooltip, getTooltipHandle), ExistingProvider(DeferredContentAware, MaterialPaperTooltipComponent)], directives: [AutoFocusDirective, DeferredContentDirective, MaterialPopupComponent, NgIf], template: ''' <material-popup *ngIf="popupSource != null" [visible]="showPopup" enforceSpaceConstraints trackLayoutChanges [preferredPositions]="preferredPositions" [offsetX]="offsetX" [offsetY]="offsetY" [autoDismiss]="focusContents" [class]="popupClassName" [source]="popupSource!" [attr.role]="focusContents ? 'dialog' : 'tooltip'"> <div class="paper-container" [autoFocus]="focusContents" (mouseover)="onMouseOver()" (mouseleave)="onMouseLeave()"> <div class="header"><ng-content select="header"></ng-content></div> <div class="body"><ng-content></ng-content></div> <div class="footer"><ng-content select="footer"></ng-content></div> </div> </material-popup>''', styleUrls: ['paper_tooltip.scss.css'], changeDetection: ChangeDetectionStrategy.onPush, preserveWhitespace: true, visibility: Visibility.all)

Constructors

MaterialPaperTooltipComponent(TooltipController _tooltipController, ChangeDetectorRef _changeDetector, HtmlElement hostElement, @Attribute('tooltipClass') String? tooltipClass)

Properties

contentVisible → Stream<bool>
Component publishes to this stream to control the visibility of contents.
no setteroverride
focusContents ↔ bool
Whether or not the tooltip contents should auto focus when opened.
getter/setter pair
hashCode → int
The hash code for this object.
no setterinherited
offsetX ↔ int
The x-offset to where the tooltip will be ultimately positioned.
getter/setter pair
offsetY ↔ int
The y-offset to where the tooltip will be ultimately positioned.
getter/setter pair
popupChild ← MaterialPopupComponent?
no getter
popupClassName → String
final
popupSource → PopupSource?
no setter
preferredPositions ↔ List<RelativePosition>
Relative positions where to try to show the tooltip.
getter/setter pair
runtimeType → Type
A representation of the runtime type of the object.
no setterinherited
showPopup → bool
no setter
tooltipHandle → Tooltip
no setter
tooltipRef ← TooltipTarget?
The element at which this tooltip is targeted.
no getter

Methods

activate() → void
Activates this Tooltip.
override
deactivate({bool immediate = false}) → void
Deactivates this Tooltip.
override
noSuchMethod(Invocation invocation) → dynamic
Invoked when a nonexistent method or property is accessed.
inherited
onMouseLeave() → void
onMouseOver() → void
toString() → String
A string representation of this object.
inherited

Operators

operator ==(Object other) → bool
The equality operator.
inherited