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:
36
libs/components/src/tooltip/tooltip.component.ts
Normal file
36
libs/components/src/tooltip/tooltip.component.ts
Normal 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);
|
||||
}
|
||||
Reference in New Issue
Block a user