PrimeNG Tooltip: Ability to show tooltip both on hover and focus

[ramji-seetharaman]

Current behavior Tooltip only shows either on hover or focus. There is not ability to bind both Hover and Focus which is required for Accessibility. Tooltips cannot be device dependent and there needs be a way to bind both the events.

Expected behavior TooltipEvent attribute must allow multiple events to be mapped to make sure that tooltip shows both on hover and focus. Something like tooltipEvent="hover focus".

What is the motivation / use case for changing the behavior? To make sure that p-tooltip is inclusive and accessible to all users.

Angular version: 8.X PrimeNG version: 8.X Browser: All Language: All

[emma11y]

I created a directive temporarily pending the correction of PrimeNg.

I replaced pTooltip with pTooltipAccessible to apply my directive. I can continue to use the other values from the primeNg tooltip.

<i class="fas fa-info-circle" [pTooltipAccessible]="This is a tooltip" tooltipPosition="top" tabindex="0" tooltipEvent="hover|focus"></i>

Here is the content of my directive called pTooltipAccessible :

import { Directive, ElementRef, NgZone, AfterViewInit, Input } from '@angular/core'; import { Tooltip } from 'primeng/tooltip';

@Directive({ selector: '[pTooltipAccessible]' }) // tslint:disable-next-line:directive-class-suffix export class TooltipAccessibleDirective extends Tooltip implements AfterViewInit { constructor(public el: ElementRef, public zone: NgZone) { super(el, zone); }

public ngAfterViewInit(): void { this.zone.runOutsideAngular(() => { switch (this.tooltipEvent) { case 'hover': this.initHoverForTooltipEvent(); break; case 'focus': this.initFocusForTooltipEvent(); break; case 'hover|focus': this.initHoverForTooltipEvent(); this.initFocusForTooltipEvent(); break; } }); }

private initHoverForTooltipEvent(): void { this.mouseEnterListener = this.onMouseEnter.bind(this); this.mouseLeaveListener = this.onMouseLeave.bind(this); this.clickListener = this.onClick.bind(this); this.el.nativeElement.addEventListener('mouseenter', this.mouseEnterListener); this.el.nativeElement.addEventListener('mouseleave', this.mouseLeaveListener); this.el.nativeElement.addEventListener('click', this.clickListener); }

private initFocusForTooltipEvent(): void { this.focusListener = this.onFocus.bind(this); this.blurListener = this.onBlur.bind(this); this.el.nativeElement.addEventListener('focus', this.focusListener); this.el.nativeElement.addEventListener('blur', this.blurListener); }

@Input('pTooltipAccessible') set textAccessible(text: string) { this.text = text; } }

[MrJacquers]

Would be great if this could be implemented :)

[mertsincan]

Hi,

So sorry for the delayed response! Improvements have been made to many components recently, both in terms of performance and enhancement. Therefore, this improvement may have been developed in another issue ticket without realizing it. You can check this in the documentation. If there is no improvement on this, can you reopen the issue so we can include it in our roadmap? Please don't forget to add your feedback as a comment after reopening the issue. These will be taken into account by us and will contribute to the development of this feature. Thanks a lot for your understanding!

Best Regards,

[emma11y]

@mertsincan I looked at your code. The tooltip is still not accessible. I just saw that you still can't choose focus and hover. It's either the focus or the hover but not both.

[mikaspell]

why so long for implementation?

[mehmetcetin01140]

Hi, Issue tracker is used for defects only as part of our commitment to quality and continuous improvement in all areas. Enhancements are collected as valuable community feedback and managed internally so moving this enhancement ticket to our internal project management backlog. For enhancement requests and other topics, you can open a new topic in PrimeNG Discussions.