I'm using ngx-bootstraps tooltip functionality and the behaviour I'm looking for is to display the tooltip on hover on desktop but essentially disable it on mobile entirely. Figured if I lock it to use the hover trigger only this would solve my problem.
In the documentation it claims that the default triggers for the tool tip are triggers="hover focus". As I don't want the focus to be in effect I manually set the triggers to triggers="hover".
This works as expected on desktop, tooltip displays on hover; but on mobile, the tooltip still insists on displaying when tapped as if the focus trigger was still in effect.
Is there something specific I need to do to disable the default behaviour?
Template below:
<ng-template #tooltipTemplate>
<div class="notification-level-tooltip tooltip-inner">
<span class="tooltip-text">
{{details | translate}}
</span>
</div>
</ng-template>
<span class="notification-level label" [ngClass]="labelClass" [tooltip]="tooltipTemplate" triggers="hover">
{{text | translate}}
</span>
You can put these classes notification-level-tooltip tooltip-inner in css media queries specifying the min and max screen sizes, in your case desktop. These queries will then take care of what will be shown in what screen size. How @media queries work