Skip to content
Snippets Groups Projects
Commit 9c7720be authored by Alexander Reifschneider's avatar Alexander Reifschneider
Browse files

OZG-7367 OZG-7372 Extend tooltip story

parent 66baa1df
Branches
Tags
1 merge request!2OZG-7367 Extend tooltip directive
...@@ -29,7 +29,7 @@ import { TooltipPosition } from './tooltip.directive'; ...@@ -29,7 +29,7 @@ import { TooltipPosition } from './tooltip.directive';
selector: 'ods-tooltip', selector: 'ods-tooltip',
imports: [NgClass], imports: [NgClass],
template: `<span template: `<span
class="tooltip fixed z-[100] animate-fadeIn cursor-default rounded bg-ozggray-900 px-3 py-2 text-sm text-whitetext before:absolute before:border-l-[0.5rem] before:border-r-[0.5rem] before:border-l-transparent before:border-r-transparent dark:bg-white" class="tooltip fixed z-[100] animate-fadeIn cursor-default whitespace-nowrap rounded bg-ozggray-900 px-3 py-2 text-sm text-whitetext before:absolute before:border-l-[0.5rem] before:border-r-[0.5rem] before:border-l-transparent before:border-r-transparent dark:bg-white"
[ngClass]="class" [ngClass]="class"
[class.visible]="show" [class.visible]="show"
[class.invisible]="!show" [class.invisible]="!show"
......
...@@ -255,6 +255,14 @@ describe('TooltipDirective', () => { ...@@ -255,6 +255,14 @@ describe('TooltipDirective', () => {
directive.leftOffset = 0; directive.leftOffset = 0;
}); });
it('should set 0 offset, if parent wider than tooltip', () => {
const rectForStandard: DOMRect = { ...parentRect, left: 50, right: 500, width: 100 };
directive.setLeftOffset(36, rectForStandard, 1000);
expect(directive.leftOffset).toBe(0);
});
it('should set positive left offset', () => { it('should set positive left offset', () => {
const rectForLeft: DOMRect = { ...parentRect, left: 10 }; const rectForLeft: DOMRect = { ...parentRect, left: 10 };
...@@ -271,7 +279,7 @@ describe('TooltipDirective', () => { ...@@ -271,7 +279,7 @@ describe('TooltipDirective', () => {
expect(directive.leftOffset).toBe(-15); expect(directive.leftOffset).toBe(-15);
}); });
it('should show tooltip on selected position otherwise', () => { it('should set 0 offset', () => {
const rectForStandard: DOMRect = { ...parentRect, left: 50, right: 500 }; const rectForStandard: DOMRect = { ...parentRect, left: 50, right: 500 };
directive.setLeftOffset(36, rectForStandard, 1000); directive.setLeftOffset(36, rectForStandard, 1000);
......
...@@ -140,9 +140,14 @@ export class TooltipDirective implements AfterViewInit, OnDestroy { ...@@ -140,9 +140,14 @@ export class TooltipDirective implements AfterViewInit, OnDestroy {
} }
setLeftOffset(tooltipWidth: number, parentRect: DOMRect, windowWidth: number): void { setLeftOffset(tooltipWidth: number, parentRect: DOMRect, windowWidth: number): void {
const { left, right } = parentRect; const { left, right, width } = parentRect;
const halfTooltipWidth: number = tooltipWidth / 2; const halfTooltipWidth: number = tooltipWidth / 2;
if (tooltipWidth < width) {
this.leftOffset = 0;
return;
}
if (halfTooltipWidth > left) { if (halfTooltipWidth > left) {
this.leftOffset = halfTooltipWidth - left; this.leftOffset = halfTooltipWidth - left;
return; return;
......
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
* Die sprachspezifischen Genehmigungen und Beschränkungen * Die sprachspezifischen Genehmigungen und Beschränkungen
* unter der Lizenz sind dem Lizenztext zu entnehmen. * unter der Lizenz sind dem Lizenztext zu entnehmen.
*/ */
import { moduleMetadata, type Meta, type StoryObj } from '@storybook/angular'; import { argsToTemplate, componentWrapperDecorator, moduleMetadata, type Meta, type StoryObj } from '@storybook/angular';
import { TooltipDirective } from './tooltip.directive'; import { TooltipDirective } from './tooltip.directive';
const meta: Meta = { const meta: Meta = {
...@@ -29,6 +29,7 @@ const meta: Meta = { ...@@ -29,6 +29,7 @@ const meta: Meta = {
excludeStories: /.*Data$/, excludeStories: /.*Data$/,
tags: ['autodocs'], tags: ['autodocs'],
decorators: [ decorators: [
componentWrapperDecorator((story) => `<div class="flex justify-between mt-16">${story}</div>`),
moduleMetadata({ moduleMetadata({
imports: [TooltipDirective], imports: [TooltipDirective],
}), }),
...@@ -46,7 +47,31 @@ export default meta; ...@@ -46,7 +47,31 @@ export default meta;
type Story = StoryObj; type Story = StoryObj;
export const Default: Story = { export const Default: Story = {
args: { tooltip: 'I stay in the center', tooltipPosition: 'below' },
argTypes: {
tooltip: { description: 'Tooltip text' },
tooltipPosition: {
description: 'Tooltip position dependent on parent element',
control: 'select',
options: ['above', 'below'],
},
},
render: (args) => ({
props: args,
template: `
<button tooltip="I am displayed to the right">→</button>
<button ${argsToTemplate(args)}>Hover me</button>
<button tooltip="I am displayed to the left">←</button>
`,
}),
};
export const Above: Story = {
render: () => ({ render: () => ({
template: '<button tooltip="Hello">I have a tooltip!</button>', template: `
<button tooltip="I am displayed to the right" tooltipPosition="above">→</button>
<button tooltip="I stay in the center" tooltipPosition="above">Hover me</button>
<button tooltip="I am displayed to the left" tooltipPosition="above">←</button>
`,
}), }),
}; };
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment