mirror of
https://github.com/bitwarden/browser
synced 2025-12-12 14:23:32 +00:00
08a022fa52
* 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
62 lines
1.4 KiB
TypeScript
62 lines
1.4 KiB
TypeScript
import { ConnectedPosition } from "@angular/cdk/overlay";
|
|
|
|
const ORIGIN_OFFSET_PX = 10;
|
|
|
|
export type TooltipPositionIdentifier =
|
|
| "right-center"
|
|
| "left-center"
|
|
| "below-center"
|
|
| "above-center";
|
|
|
|
export interface TooltipPosition extends ConnectedPosition {
|
|
id: TooltipPositionIdentifier;
|
|
}
|
|
|
|
export const tooltipPositions: TooltipPosition[] = [
|
|
/**
|
|
* The order of these positions matters. The Tooltip component will use
|
|
* the first position that fits within the viewport.
|
|
*/
|
|
|
|
// Tooltip opens to right of trigger
|
|
{
|
|
id: "right-center",
|
|
offsetX: ORIGIN_OFFSET_PX,
|
|
originX: "end",
|
|
originY: "center",
|
|
overlayX: "start",
|
|
overlayY: "center",
|
|
panelClass: ["bit-tooltip-right-center"],
|
|
},
|
|
// ... to left of trigger
|
|
{
|
|
id: "left-center",
|
|
offsetX: -ORIGIN_OFFSET_PX,
|
|
originX: "start",
|
|
originY: "center",
|
|
overlayX: "end",
|
|
overlayY: "center",
|
|
panelClass: ["bit-tooltip-left-center"],
|
|
},
|
|
// ... below trigger
|
|
{
|
|
id: "below-center",
|
|
offsetY: ORIGIN_OFFSET_PX,
|
|
originX: "center",
|
|
originY: "bottom",
|
|
overlayX: "center",
|
|
overlayY: "top",
|
|
panelClass: ["bit-tooltip-below-center"],
|
|
},
|
|
// ... above trigger
|
|
{
|
|
id: "above-center",
|
|
offsetY: -ORIGIN_OFFSET_PX,
|
|
originX: "center",
|
|
originY: "top",
|
|
overlayX: "center",
|
|
overlayY: "bottom",
|
|
panelClass: ["bit-tooltip-above-center"],
|
|
},
|
|
];
|