1
0
mirror of https://github.com/bitwarden/browser synced 2025-12-20 02:03:39 +00:00

[CL-227] Tooltip component (#16442)

* add tooltip component

* fix typescript errors

* fix more typescript errors

* remove css comments

* fix tooltip blocking mouse events

* move default position logic to shared util

* fix tooltip stories options

* add tooltip spec

* add offset arg to default positions

* add shadow to tooltip

* increase offset

* adding max width

* fix disabled button cursor

* add stronger position type

* fixing types

* change get positions function to type return correctly

* more fixing types

* default options object

* add mock to tooltip stories

* add figma link to story

* update positions file name. remove getter

* remove standalone. add comment about component use

* add jsdoc comment to directive inputs

* fix typo

* remove instances of setInput

* fix storybook injection error

* remove unneeded functions

* remove unneeded variables

* remove comment

* move popover positions back with component

* fix popover i18n mock

* creat etooltip positions file

* update test to account for change to setInput calls

* remove panel class as it's not necessary

* improve tooltip docs page

* use classes for styling. Simpliy position changes

* simplify tests. No longer need to track position changes

* move comment to correct place

* fix typos

* remove unnecessary standalone declaration
This commit is contained in:
Bryan Cunningham
2025-10-01 14:01:53 -04:00
committed by GitHub
parent de3759fa85
commit 08a022fa52
12 changed files with 644 additions and 1 deletions

View File

@@ -0,0 +1,36 @@
import { CommonModule } from "@angular/common";
import {
Component,
ElementRef,
inject,
InjectionToken,
Signal,
TemplateRef,
viewChild,
} from "@angular/core";
import { TooltipPosition } from "./tooltip-positions";
type TooltipData = {
content: Signal<string>;
isVisible: Signal<boolean>;
tooltipPosition: Signal<TooltipPosition>;
};
export const TOOLTIP_DATA = new InjectionToken<TooltipData>("TOOLTIP_DATA");
/**
* tooltip component used internally by the tooltip.directive. Not meant to be used explicitly
*/
@Component({
selector: "bit-tooltip",
templateUrl: "./tooltip.component.html",
imports: [CommonModule],
})
export class TooltipComponent {
readonly templateRef = viewChild.required(TemplateRef);
private elementRef = inject(ElementRef<HTMLDivElement>);
readonly tooltipData = inject<TooltipData>(TOOLTIP_DATA);
}