@farm-investimentos/front-mfe-components 15.14.3 → 15.14.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/dist/front-mfe-components.common.js +385 -335
  2. package/dist/front-mfe-components.common.js.map +1 -1
  3. package/dist/front-mfe-components.css +1 -1
  4. package/dist/front-mfe-components.umd.js +385 -335
  5. package/dist/front-mfe-components.umd.js.map +1 -1
  6. package/dist/front-mfe-components.umd.min.js +1 -1
  7. package/dist/front-mfe-components.umd.min.js.map +1 -1
  8. package/package.json +1 -1
  9. package/src/components/Tooltip/Tooltip.scss +89 -61
  10. package/src/components/Tooltip/Tooltip.stories.js +228 -152
  11. package/src/components/Tooltip/Tooltip.vue +265 -249
  12. package/src/components/Tooltip/docs/README.md +304 -0
  13. package/src/components/Tooltip/docs/SPECIFICATION.md +374 -0
  14. package/src/components/Tooltip/index.ts +16 -0
  15. package/src/components/Tooltip/types/tooltip.types.ts +49 -0
  16. package/src/components/Tooltip/utils/tooltip.utils.ts +70 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@farm-investimentos/front-mfe-components",
3
- "version": "15.14.3",
3
+ "version": "15.14.5",
4
4
  "author": "farm investimentos",
5
5
  "private": false,
6
6
  "main": "./dist/front-mfe-components.common.js",
package/src/components/Tooltip/Tooltip.scss CHANGED
@@ -1,44 +1,63 @@
1
- @import '../../configurations/variables';
1
+ /*
2
+ * CSS simplificado para Tooltip - Abordagem simples e direta
3
+ * SEMPRE usa position: fixed via JavaScript
4
+ */
2
5
 
3
- $arrow-size: 6px;
4
- $tooltip-color: #333333;
5
- $arrow-margin: 12px;
6
+ /* Container principal */
7
+ .tooltip-container {
8
+ display: inline-block;
9
+ position: relative;
10
+ }
11
+
12
+ /* Activator */
13
+ .tooltip-activator {
14
+ display: inline-block;
15
+ }
6
16
 
17
+ /*
18
+ * COMPATIBILIDADE: Classes antigas mantidas para outros componentes
19
+ * que fazem @extend .farm-tooltip__popup
20
+ */
7
21
  .farm-tooltip {
8
22
  display: inline-block;
9
23
  position: relative;
24
+ }
10
25
 
11
- &__activator {
12
- display: inline-block;
13
- }
26
+ .farm-tooltip__activator {
27
+ display: inline-block;
14
28
  }
15
29
 
16
30
  .farm-tooltip__popup {
17
- background-color: $tooltip-color;
18
- visibility: hidden;
19
- opacity: 0;
20
- transition: visibility 0.3s linear, opacity 0.3s linear;
21
- position: absolute;
22
- width: 160px;
31
+ /* Estilos base mantidos para compatibilidade */
32
+ background-color: #333333;
23
33
  color: #f5f5f5;
24
34
  border-radius: 5px;
25
- font-family: 'Manrope', sans-serif !important;
35
+ font-family: 'Manrope', sans-serif;
26
36
  font-size: 12px;
27
- font-weight: 500px;
37
+ font-weight: 500;
28
38
  padding: 16px;
29
- display: block;
39
+ position: fixed; /* SEMPRE fixed agora */
30
40
  z-index: 9999;
41
+ transform: translateZ(0);
42
+ pointer-events: auto;
31
43
 
32
- &--fluid {
33
- width: auto;
34
- max-width: 300px;
35
- }
44
+ /* Estados */
45
+ opacity: 0;
46
+ visibility: hidden;
47
+ transition: opacity 0.3s linear, visibility 0.3s linear;
36
48
 
49
+ /* Variantes */
37
50
  &--visible {
38
51
  opacity: 1;
39
52
  visibility: visible;
40
53
  }
41
54
 
55
+ &--fluid {
56
+ width: auto;
57
+ max-width: 300px;
58
+ }
59
+
60
+ /* Header */
42
61
  .farm-tooltip__header {
43
62
  display: flex;
44
63
  justify-content: space-between;
@@ -56,55 +75,60 @@ $arrow-margin: 12px;
56
75
  font-weight: 500;
57
76
  }
58
77
 
59
- .farm-tooltip__arrow {
60
- position: absolute;
61
- width: 0;
62
- height: 0;
63
- border-style: solid;
64
- z-index: 10000;
78
+ .farm-tooltip__close {
79
+ width: 16px;
80
+ height: 16px;
81
+ line-height: 16px;
82
+ text-align: center;
83
+ cursor: pointer;
84
+ font-size: 16px;
85
+ color: #f5f5f5;
65
86
  }
87
+ }
66
88
 
67
- // Top positions - arrow at bottom
68
- &--top-center .farm-tooltip__arrow,
69
- &--top-left .farm-tooltip__arrow,
70
- &--top-right .farm-tooltip__arrow {
71
- border-width: $arrow-size $arrow-size 0 $arrow-size;
72
- border-color: $tooltip-color transparent transparent transparent;
73
- bottom: -$arrow-size + 1px;
74
- z-index: 99999;
75
- }
89
+ /* Estilos globais para tooltip criado dinamicamente */
90
+ .tooltip-popup {
91
+ background-color: #333333;
92
+ color: #f5f5f5;
93
+ border-radius: 5px;
94
+ font-family: 'Manrope', sans-serif;
95
+ font-size: 12px;
96
+ font-weight: 500;
97
+ padding: 16px;
98
+ position: fixed;
99
+ z-index: 9999;
100
+ transform: translateZ(0);
101
+ pointer-events: auto;
76
102
 
77
- // Bottom positions - arrow at top
78
- &--bottom-center .farm-tooltip__arrow,
79
- &--bottom-left .farm-tooltip__arrow,
80
- &--bottom-right .farm-tooltip__arrow {
81
- border-width: 0 $arrow-size $arrow-size $arrow-size;
82
- border-color: transparent transparent $tooltip-color transparent;
83
- top: -$arrow-size + 1px;
84
- z-index: 99999;
103
+ /* Estados */
104
+ opacity: 0;
105
+ visibility: hidden;
106
+ transition: opacity 0.3s linear, visibility 0.3s linear;
107
+
108
+ &--visible {
109
+ opacity: 1;
110
+ visibility: visible;
85
111
  }
86
112
 
87
- // Left alignment - arrow at left
88
- &--top-left .farm-tooltip__arrow,
89
- &--bottom-left .farm-tooltip__arrow {
90
- left: $arrow-margin;
113
+ /* Header */
114
+ .tooltip-header {
115
+ display: flex;
116
+ justify-content: space-between;
117
+ align-items: center;
118
+ margin-bottom: 8px;
91
119
  }
92
120
 
93
- // Right alignment - arrow at right
94
- &--top-right .farm-tooltip__arrow,
95
- &--bottom-right .farm-tooltip__arrow {
96
- right: $arrow-margin;
121
+ .tooltip-title {
122
+ font-weight: 600;
123
+ font-size: 13px;
124
+ margin-right: 16px;
97
125
  }
98
126
 
99
- // Center alignment - arrow at center
100
- &--top-center .farm-tooltip__arrow,
101
- &--bottom-center .farm-tooltip__arrow {
102
- left: 50%;
103
- transform: translateX(-50%);
127
+ .tooltip-content {
128
+ font-weight: 500;
104
129
  }
105
130
 
106
- .farm-tooltip__close {
107
- position: relative;
131
+ .tooltip-close {
108
132
  width: 16px;
109
133
  height: 16px;
110
134
  line-height: 16px;
@@ -114,9 +138,13 @@ $arrow-margin: 12px;
114
138
  color: #f5f5f5;
115
139
  }
116
140
 
117
- &:not(.farm-tooltip__popup--has-title) .farm-tooltip__close {
141
+ /* Seta presa ao tooltip */
142
+ .tooltip-arrow {
118
143
  position: absolute;
119
- top: 8px;
120
- right: 8px;
144
+ width: 0;
145
+ height: 0;
146
+ border-style: solid;
147
+ z-index: 10000;
148
+ pointer-events: none;
121
149
  }
122
150
  }
package/src/components/Tooltip/Tooltip.stories.js CHANGED
@@ -1,205 +1,281 @@
1
- import { withDesign } from 'storybook-addon-designs';
2
- import Tooltip from '.';
1
+ import Tooltip from './Tooltip.vue';
2
+ import Modal from '../Modal/Modal.vue';
3
3
 
4
4
  export default {
5
- title: 'Interactions/Tooltip',
5
+ title: 'Display/Tooltip',
6
6
  component: Tooltip,
7
- decorators: [withDesign],
8
7
  parameters: {
9
8
  docs: {
10
9
  description: {
11
10
  component: `Tooltip<br />
12
11
  selector: <em>farm-tooltip</em><br />
13
12
  <span style="color: var(--farm-primary-base);">ready for use</span>
14
- <br /><br />
15
- <h3>Important notes:</h3>
16
- <ul>
17
- <li><strong>Do not add margin to the activator element</strong> - This can confuse the tooltip display watcher and prevent the arrow from being positioned correctly</li>
18
- <li>Prefer to add margin to the parent element or sibling elements of the tooltip</li>
19
- <li>Arrow positioning is calculated based on the activator element position</li>
20
- <li>The close button (X) is automatically displayed only in tooltips controlled by v-model</li>
21
- <li>The arrow is only displayed when a position is explicitly defined (position property). If no position is defined, the tooltip will not have an arrow</li>
22
- <li>You can add a title to the tooltip using the "title" slot. When used in a controlled tooltip, the close button will be aligned with the title</li>
23
- </ul>
24
13
  `,
25
14
  },
26
15
  },
27
- design: {
28
- type: 'figma',
29
- url: 'https://www.figma.com/file/p62YDSTfWg0Mcnf5APfdvI/%E2%9C%8D-Design-System-%7C-v2?node-id=3779%3A6131',
30
- },
31
16
  viewMode: 'docs',
32
17
  },
33
18
  };
34
19
 
35
- export const Tooltips = () => ({
36
- template: `<div style="padding-left: 80px; padding-top: 80px;">
37
- <span style="display: flex; align-items: center;">
38
- Hover over the icon
39
- <farm-tooltip>
40
- <span>
41
- This is a simple tooltip
42
- </span>
43
- <template v-slot:activator>
44
- <farm-icon size="sm" color="gray" style="margin-left: 8px; cursor: help;">help-circle</farm-icon>
45
- </template>
46
- </farm-tooltip>
47
- </span>
48
- </div>`,
49
- });
50
-
51
- export const InsideCard = () => ({
52
- template: `<div style="padding-left: 80px; padding-top: 80px;">
53
- <farm-card style="padding: 32px">
20
+ export const Primary = () => ({
21
+ components: { Tooltip },
22
+ template: `
23
+ <div style="padding-left: 80px; padding-top: 80px;">
54
24
  <span style="display: flex; align-items: center;">
55
- <span style="margin-right: 8px;">Important information</span>
56
- <farm-tooltip>
57
- this is the tooltip!
25
+ Hover over the icon
26
+ <farm-tooltip placement="top-center">
58
27
  <template v-slot:activator>
59
- <farm-icon size="sm" color="gray" style="cursor: help;">help-circle</farm-icon>
28
+ <farm-icon size="sm" color="gray">help-circle</farm-icon>
60
29
  </template>
30
+ This is a simple tooltip
61
31
  </farm-tooltip>
62
32
  </span>
63
- </farm-card>
64
- </div>`,
33
+ </div>
34
+ `,
65
35
  });
66
36
 
67
- export const FluidTooltip = () => ({
68
- template: `<div style="padding-left: 80px; padding-top: 80px;">
69
- <span style="display: flex; align-items: center;">
70
- <span style="margin-right: 8px;">Fluid width tooltip</span>
71
- <farm-tooltip fluid>
72
- This is a fluid tooltip that will grow based on its content.
73
- It contains a longer text to demonstrate how it expands horizontally.
74
- <template v-slot:activator>
75
- <farm-icon size="sm" color="gray" style="cursor: help;">help-circle</farm-icon>
76
- </template>
77
- </farm-tooltip>
78
- </span>
79
- </div>`,
80
- });
37
+ export const AllPositions = () => ({
38
+ components: { Tooltip },
39
+ template: `
40
+ <div style="padding: 100px; display: flex; flex-direction: column; align-items: center; gap: 50px;">
41
+ <div style="display: flex; gap: 30px; margin-bottom: 50px;">
42
+ <div style="display: flex; flex-direction: column; align-items: center;">
43
+ <p style="margin-bottom: 10px;">Top Left</p>
44
+ <farm-tooltip placement="top-left">
45
+ <template v-slot:activator>
46
+ <farm-icon size="md" color="gray" style="cursor: help;">help-circle</farm-icon>
47
+ </template>
48
+ Top-Left Position
49
+ </farm-tooltip>
50
+ </div>
81
51
 
82
- export const TooltipPositions = () => ({
83
- template: `<div style="padding: 100px; display: flex; flex-direction: column; align-items: center; gap: 50px;">
84
- <div style="display: flex; gap: 30px; margin-bottom: 50px;">
85
- <div style="display: flex; flex-direction: column; align-items: center;">
86
- <p style="margin-bottom: 10px;">Top Left</p>
87
- <farm-tooltip position="top-left">
88
- Top-Left Position
89
- <template v-slot:activator>
90
- <farm-icon size="md" color="gray" style="cursor: help;">help-circle</farm-icon>
91
- </template>
92
- </farm-tooltip>
93
- </div>
52
+ <div style="display: flex; flex-direction: column; align-items: center;">
53
+ <p style="margin-bottom: 10px;">Top Center</p>
54
+ <farm-tooltip placement="top-center">
55
+ <template v-slot:activator>
56
+ <farm-icon size="md" color="gray" style="cursor: help;">help-circle</farm-icon>
57
+ </template>
58
+ Top-Center Position (Default)
59
+ </farm-tooltip>
60
+ </div>
94
61
 
95
- <div style="display: flex; flex-direction: column; align-items: center;">
96
- <p style="margin-bottom: 10px;">Top Center</p>
97
- <farm-tooltip position="top-center">
98
- Top-Center Position (Default)
99
- <template v-slot:activator>
100
- <farm-icon size="md" color="gray" style="cursor: help;">help-circle</farm-icon>
101
- </template>
102
- </farm-tooltip>
62
+ <div style="display: flex; flex-direction: column; align-items: center;">
63
+ <p style="margin-bottom: 10px;">Top Right</p>
64
+ <farm-tooltip placement="top-right">
65
+ <template v-slot:activator>
66
+ <farm-icon size="md" color="gray" style="cursor: help;">help-circle</farm-icon>
67
+ </template>
68
+ Top-Right Position
69
+ </farm-tooltip>
70
+ </div>
103
71
  </div>
104
72
 
105
- <div style="display: flex; flex-direction: column; align-items: center;">
106
- <p style="margin-bottom: 10px;">Top Right</p>
107
- <farm-tooltip position="top-right">
108
- Top-Right Position
109
- <template v-slot:activator>
110
- <farm-icon size="md" color="gray" style="cursor: help;">help-circle</farm-icon>
111
- </template>
112
- </farm-tooltip>
73
+ <div style="display: flex; gap: 30px;">
74
+ <div style="display: flex; flex-direction: column; align-items: center;">
75
+ <p style="margin-bottom: 10px;">Bottom Left</p>
76
+ <farm-tooltip placement="bottom-left">
77
+ <template v-slot:activator>
78
+ <farm-icon size="md" color="gray" style="cursor: help;">help-circle</farm-icon>
79
+ </template>
80
+ Bottom-Left Position
81
+ </farm-tooltip>
82
+ </div>
83
+
84
+ <div style="display: flex; flex-direction: column; align-items: center;">
85
+ <p style="margin-bottom: 10px;">Bottom Center</p>
86
+ <farm-tooltip placement="bottom-center">
87
+ <template v-slot:activator>
88
+ <farm-icon size="md" color="gray" style="cursor: help;">help-circle</farm-icon>
89
+ </template>
90
+ Bottom-Center Position
91
+ </farm-tooltip>
92
+ </div>
93
+
94
+ <div style="display: flex; flex-direction: column; align-items: center;">
95
+ <p style="margin-bottom: 10px;">Bottom Right</p>
96
+ <farm-tooltip placement="bottom-right">
97
+ <template v-slot:activator>
98
+ <farm-icon size="md" color="gray" style="cursor: help;">help-circle</farm-icon>
99
+ </template>
100
+ Bottom-Right Position
101
+ </farm-tooltip>
102
+ </div>
113
103
  </div>
114
104
  </div>
105
+ `,
106
+ });
115
107
 
116
- <div style="display: flex; gap: 30px;">
117
- <div style="display: flex; flex-direction: column; align-items: center;">
118
- <p style="margin-bottom: 10px;">Bottom Left</p>
119
- <farm-tooltip position="bottom-left">
120
- Bottom-Left Position
108
+ export const ControlledTooltip = () => ({
109
+ components: { Tooltip },
110
+ data() {
111
+ return {
112
+ showTooltip: false,
113
+ };
114
+ },
115
+ template: `
116
+ <div style="padding: 80px;">
117
+ <span style="display: flex; align-items: center;">
118
+ <span >Click to open:</span>
119
+ <farm-tooltip v-model="showTooltip" placement="top-right">
121
120
  <template v-slot:activator>
122
- <farm-icon size="md" color="gray" style="cursor: help;">help-circle</farm-icon>
121
+ <farm-icon @click="showTooltip = !showTooltip" size="md" color="blue" style="cursor: pointer;">help-circle</farm-icon>
123
122
  </template>
123
+ <template v-slot:title>Controlled Tooltip</template>
124
+ This tooltip is controlled by v-model
124
125
  </farm-tooltip>
125
- </div>
126
+ </span>
127
+ </div>
128
+ `,
129
+ });
126
130
 
127
- <div style="display: flex; flex-direction: column; align-items: center;">
128
- <p style="margin-bottom: 10px;">Bottom Center</p>
129
- <farm-tooltip position="bottom-center">
130
- Bottom-Center Position
131
+ export const FluidTooltip = () => ({
132
+ components: { Tooltip },
133
+ template: `
134
+ <div style="padding-left: 80px; padding-top: 80px;">
135
+ <span style="display: flex; align-items: center;">
136
+ <span style="margin-right: 8px;">Fluid width tooltip</span>
137
+ <farm-tooltip placement="top-center" :fluid="true">
131
138
  <template v-slot:activator>
132
- <farm-icon size="md" color="gray" style="cursor: help;">help-circle</farm-icon>
139
+ <farm-icon size="sm" color="gray" style="cursor: help;">help-circle</farm-icon>
133
140
  </template>
141
+ This is a fluid tooltip that will grow based on its content.
142
+ It contains a longer text to demonstrate how it expands horizontally.
134
143
  </farm-tooltip>
135
- </div>
144
+ </span>
145
+ </div>
146
+ `,
147
+ });
136
148
 
137
- <div style="display: flex; flex-direction: column; align-items: center;">
138
- <p style="margin-bottom: 10px;">Bottom Right</p>
139
- <farm-tooltip position="bottom-right">
140
- Bottom-Right Position
141
- <template v-slot:activator>
142
- <farm-icon size="md" color="gray" style="cursor: help;">help-circle</farm-icon>
143
- </template>
144
- </farm-tooltip>
145
- </div>
149
+ export const WithModal = () => ({
150
+ components: { Tooltip, Modal },
151
+ data() {
152
+ return {
153
+ showModal: false,
154
+ };
155
+ },
156
+ template: `
157
+ <div>
158
+ <button
159
+ @click="showModal = true"
160
+ style="background: #007bff; color: white; padding: 12px 24px; border: none; border-radius: 6px; font-size: 14px; cursor: pointer; font-weight: 500;"
161
+ >
162
+ Abrir Modal com Tooltip
163
+ </button>
164
+
165
+ <farm-modal v-model="showModal" size="md">
166
+ <template v-slot:header>
167
+ <h3>Modal com Tooltip e Scroll</h3>
168
+ </template>
169
+ <template v-slot:content>
170
+ <div style="height: 400px; overflow-y: auto; padding: 20px;">
171
+ <p>Conteúdo inicial do modal...</p>
172
+
173
+ <div style="margin: 50px 0;">
174
+ <span style="display: flex; align-items: center;">
175
+ <span style="margin-right: 8px;">Tooltip no Modal:</span>
176
+ <farm-tooltip placement="top-left">
177
+ <template v-slot:activator>
178
+ <farm-icon size="sm" color="gray" style="cursor: help;">help-circle</farm-icon>
179
+ </template>
180
+ <template v-slot:title>Tooltip no Modal</template>
181
+ Este tooltip está dentro de um modal com scroll!
182
+ </farm-tooltip>
183
+ </span>
184
+ </div>
185
+
186
+ <p>Mais conteúdo para gerar scroll...</p>
187
+ <p>Linha 1</p>
188
+ <p>Linha 2</p>
189
+ <p>Linha 3</p>
190
+ <p>Linha 4</p>
191
+ <p>Linha 5</p>
192
+ <p>Linha 6</p>
193
+ <p>Linha 7</p>
194
+ <p>Linha 8</p>
195
+ <p>Linha 9</p>
196
+ <p>Linha 10</p>
197
+
198
+ <div style="margin: 50px 0;">
199
+ <span style="display: flex; align-items: center;">
200
+ <span style="margin-right: 8px;">Outro Tooltip:</span>
201
+ <farm-tooltip placement="bottom-right">
202
+ <template v-slot:activator>
203
+ <farm-icon size="sm" color="gray" style="cursor: help;">help-circle</farm-icon>
204
+ </template>
205
+ <template v-slot:title>Outro Tooltip</template>
206
+ Este tooltip está no final do conteúdo com scroll!
207
+ </farm-tooltip>
208
+ </span>
209
+ </div>
210
+
211
+ <p>Linha 11</p>
212
+ <p>Linha 12</p>
213
+ <p>Linha 13</p>
214
+ <p>Linha 14</p>
215
+ <p>Linha 15</p>
216
+ <p>Linha 16</p>
217
+ <p>Linha 17</p>
218
+ <p>Linha 18</p>
219
+ <p>Linha 19</p>
220
+ <p>Linha 20</p>
221
+ <p>Fim do conteúdo!</p>
222
+ </div>
223
+ </template>
224
+ <template v-slot:footer>
225
+ <button @click="showModal = false" style="background: #6c757d; color: white; padding: 8px 16px; border: none; border-radius: 4px;">
226
+ Fechar Modal
227
+ </button>
228
+ </template>
229
+ </farm-modal>
146
230
  </div>
147
- </div>`,
231
+ `,
148
232
  });
149
233
 
150
- export const FluidWithPosition = () => ({
151
- template: `<div style="padding: 200px;">
152
- <span style="display: flex; align-items: center;">
153
- <span style="margin-right: 8px;">Fluid tooltip with position</span>
154
- <farm-tooltip fluid position="bottom-left">
155
- This is a fluid tooltip with Bottom-Left position.
156
- Notice how it grows based on content and has the arrow in the correct position.
234
+ export const MultipleTooltips = () => ({
235
+ components: { Tooltip },
236
+ template: `
237
+ <div style="display: flex; gap: 20px; padding: 50px;">
238
+ <farm-tooltip placement="top-left">
157
239
  <template v-slot:activator>
158
- <farm-icon size="md" color="gray" style="cursor: help;">help-circle</farm-icon>
240
+ <farm-icon size="sm" color="gray" style="cursor: help;">help-circle</farm-icon>
159
241
  </template>
242
+ Tooltip Top-Left
160
243
  </farm-tooltip>
161
- </span>
162
- </div>`,
163
- });
164
-
165
- export const TooltipWithTitle = () => ({
166
- template: `<div style="padding-left: 80px; padding-top: 80px;">
167
- <span style="display: flex; align-items: center;">
168
- <span style="margin-right: 8px;">Tooltip with title</span>
169
- <farm-tooltip fluid position="top-left">
170
- <template v-slot:title>
171
- <farm-icon size="sm" color="white">alert</farm-icon>
172
- <span class="ml-10">Important Information</span>
244
+
245
+ <farm-tooltip placement="top-center">
246
+ <template v-slot:activator>
247
+ <farm-icon size="sm" color="gray" style="cursor: help;">help-circle</farm-icon>
173
248
  </template>
174
- This tooltip has a title that appears at the top.
249
+ Tooltip Top-Center
250
+ </farm-tooltip>
251
+
252
+ <farm-tooltip placement="top-right">
175
253
  <template v-slot:activator>
176
- <farm-icon size="md" color="gray" style="cursor: help;">help-circle</farm-icon>
254
+ <farm-icon size="sm" color="gray" style="cursor: help;">help-circle</farm-icon>
177
255
  </template>
256
+ Tooltip Top-Right
178
257
  </farm-tooltip>
179
- </span>
180
- </div>`,
181
- });
182
-
183
- export const ControlledTooltipWithTitle = () => ({
184
- data() {
185
- return {
186
- showTooltip: false,
187
- };
188
- },
189
- template: `<div style="padding: 80px;">
190
- <span style="display: flex; align-items: center;">
191
- <span style="margin-right: 8px;">Click to open:</span>
192
- <farm-tooltip fluid v-model="showTooltip" position="top-right">
193
- <template v-slot:title>
194
- Tooltip Title
258
+
259
+ <farm-tooltip placement="bottom-left">
260
+ <template v-slot:activator>
261
+ <farm-icon size="sm" color="gray" style="cursor: help;">help-circle</farm-icon>
195
262
  </template>
196
- This is a controlled tooltip with title.
197
- <br><br>
198
- Notice how the close button is aligned with the title.
263
+ Tooltip Bottom-Left
264
+ </farm-tooltip>
265
+
266
+ <farm-tooltip placement="bottom-center">
199
267
  <template v-slot:activator>
200
- <farm-icon @click="showTooltip = !showTooltip" size="md" color="blue" style="cursor: pointer;">help-circle</farm-icon>
268
+ <farm-icon size="sm" color="gray" style="cursor: help;">help-circle</farm-icon>
201
269
  </template>
270
+ Tooltip Bottom-Center
202
271
  </farm-tooltip>
203
- </span>
204
- </div>`,
272
+
273
+ <farm-tooltip placement="bottom-right">
274
+ <template v-slot:activator>
275
+ <farm-icon size="sm" color="gray" style="cursor: help;">help-circle</farm-icon>
276
+ </template>
277
+ Tooltip Bottom-Right
278
+ </farm-tooltip>
279
+ </div>
280
+ `,
205
281
  });