feat(tooltip): add styles prop (#895)

telekom · Feb 22, 2022 · 4bae4a9 · 4bae4a9
1 parent e46feea
commit 4bae4a9
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 0 deletions.
diff --git a/packages/components/src/components/tooltip/readme.md b/packages/components/src/components/tooltip/readme.md
@@ -17,6 +17,7 @@
 | `placement`       | `placement`        | (optional) Position of the Tooltip on the Object                                                                                                                                                      | `"bottom" \| "bottom-end" \| "bottom-start" \| "left" \| "left-end" \| "left-start" \| "right" \| "right-end" \| "right-start" \| "top" \| "top-end" \| "top-start"` | `'top'`         |
 | `preventOverflow` | `prevent-overflow` | (optional) Switching the preventOverflow option of the tooltip on and off                                                                                                                             | `boolean`                                                                                                                                                            | `false`         |
 | `skidding`        | `skidding`         | (optional) skidding moves the tooltip of the element in dependence of its `placement` to the element either on an x-axis (at `placement` top/down) or on a y-axis (for output `placement` left/right) | `number`                                                                                                                                                             | `0`             |
+| `styles`          | `styles`           | (optional) Injected CSS styles                                                                                                                                                                        | `string`                                                                                                                                                             | `undefined`     |
 | `trigger`         | `trigger`          | (optional) Set custom trigger Event selection                                                                                                                                                         | `string`                                                                                                                                                             | `'hover focus'` |
 
 

diff --git a/packages/components/src/components/tooltip/tooltip.tsx b/packages/components/src/components/tooltip/tooltip.tsx
@@ -71,6 +71,8 @@ export class Tooltip {
   @Prop() flip: boolean = true;
   /** (optional) Switching the preventOverflow option of the tooltip on and off */
   @Prop() preventOverflow: boolean = false;
+  /** (optional) Injected CSS styles */
+  @Prop() styles?: string;
   @State() mouseOverTooltip: boolean = false;
 
   @Event({ eventName: 'scale-before-show' }) tooltipBeforeShow: EventEmitter;
@@ -241,6 +243,7 @@ export class Tooltip {
         onMouseOver={this.handleMouseOver}
         onMouseOut={this.handleMouseOut}
       >
+        {this.styles && <style>{this.styles}</style>}
         <div class="slot-container">
           <slot onSlotchange={this.handleSlotChange}></slot>
         </div>

diff --git a/packages/storybook-vue/stories/3_components/tooltip/ScaleTooltip.vue b/packages/storybook-vue/stories/3_components/tooltip/ScaleTooltip.vue
@@ -29,6 +29,7 @@ export default {
     trigger: { type: String },
     flip: { type: Boolean },
     preventOverflow: { type: Boolean },
+    styles: String,
   },
   methods: {
     'scale-show'($event) {

diff --git a/packages/storybook-vue/stories/3_components/tooltip/Tooltip.stories.mdx b/packages/storybook-vue/stories/3_components/tooltip/Tooltip.stories.mdx
@@ -81,6 +81,7 @@ export const Template = (args, { argTypes }) => ({
       :trigger="trigger"
       :flip="flip"
       :preventOverflow="preventOverflow"
+      :styles="styles"
     >
     <scale-button></scale-button>
     </scale-tooltip>
@@ -103,6 +104,7 @@ export const SlotTemplate = (args, { argTypes }) => ({
       :trigger="trigger"
       :flip="flip"
       :preventOverflow="preventOverflow"
+      :styles="styles"
     >
     <template v-slot:content>
         <a slot="content" href="https://github.com/telekom/scale" style="color: white;background-color: transparent;">I'm a HTML-tooltip with a link</a>
@@ -128,6 +130,7 @@ export const Slot2Template = (args, { argTypes }) => ({
       :trigger="trigger"
       :flip="flip"
       :preventOverflow="preventOverflow"
+      :styles="styles"
     >
     <template v-slot:content>
       <scale-rating-stars slot="content" rating="1"></scale-rating-stars>