Skip to content

Commit 980f624

Browse files
zxryszxrys
authored
Merge pull request #557 from Br1an67/fix/issue-538-safari-tooltip
fix: use RichTooltip for help icons in Safari/Edge
2 parents 771a0a6 + 4137ce1 commit 980f624

1 file changed

Lines changed: 56 additions & 55 deletions

File tree

‎frontend/src/components/DynamicFormField.vue‎

Lines changed: 56 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,13 @@
55
<label>
66
{{ field.displayName || field.name }}
77
<span v-if="field.required" class="required-asterisk">*</span>
8-
<span
8+
<RichTooltip
99
v-if="field.description"
10-
class="help-icon"
11-
:title="field.description"
10+
:content="{ description: field.description }"
11+
placement="top"
1212
>
13-
?
14-
</span>
13+
<span class="help-icon" tabindex="0">?</span>
14+
</RichTooltip>
1515
</label>
1616
<div class="child-node-container">
1717
<div class="child-node-controls">
@@ -120,13 +120,13 @@
120120
<label>
121121
{{ field.displayName || field.name }}
122122
<span v-if="field.required" class="required-asterisk">*</span>
123-
<span
123+
<RichTooltip
124124
v-if="field.description"
125-
class="help-icon"
126-
:title="field.description"
125+
:content="{ description: field.description }"
126+
placement="top"
127127
>
128-
?
129-
</span>
128+
<span class="help-icon" tabindex="0">?</span>
129+
</RichTooltip>
130130
</label>
131131
<div class="child-node-container">
132132
<div class="child-node-controls">
@@ -232,13 +232,13 @@
232232
<label :for="`${modalId}-${field.name}`">
233233
{{ field.displayName || field.name }}
234234
<span v-if="field.required" class="required-asterisk">*</span>
235-
<span
235+
<RichTooltip
236236
v-if="field.description"
237-
class="help-icon"
238-
:title="field.description"
237+
:content="{ description: field.description }"
238+
placement="top"
239239
>
240-
?
241-
</span>
240+
<span class="help-icon" tabindex="0">?</span>
241+
</RichTooltip>
242242
</label>
243243
<div class="custom-select-wrapper" :class="{ 'select-disabled': isReadOnly }">
244244
<input
@@ -291,13 +291,13 @@
291291
<label>
292292
{{ field.displayName || field.name }}
293293
<span v-if="field.required" class="required-asterisk">*</span>
294-
<span
294+
<RichTooltip
295295
v-if="field.description"
296-
class="help-icon"
297-
:title="field.description"
296+
:content="{ description: field.description }"
297+
placement="top"
298298
>
299-
?
300-
</span>
299+
<span class="help-icon" tabindex="0">?</span>
300+
</RichTooltip>
301301
</label>
302302
<div class="multi-select-options">
303303
<label
@@ -328,13 +328,13 @@
328328
<label :for="`${modalId}-${field.name}`" class="switch-label-text">
329329
{{ field.displayName || field.name }}
330330
<span v-if="field.required" class="required-asterisk">*</span>
331-
<span
331+
<RichTooltip
332332
v-if="field.description"
333-
class="help-icon"
334-
:title="field.description"
333+
:content="{ description: field.description }"
334+
placement="top"
335335
>
336-
?
337-
</span>
336+
<span class="help-icon" tabindex="0">?</span>
337+
</RichTooltip>
338338
</label>
339339
<label class="switch-container">
340340
<input
@@ -354,13 +354,13 @@
354354
<label :for="`${modalId}-${field.name}`">
355355
{{ field.displayName || field.name }}
356356
<span v-if="field.required" class="required-asterisk">*</span>
357-
<span
357+
<RichTooltip
358358
v-if="field.description"
359-
class="help-icon"
360-
:title="field.description"
359+
:content="{ description: field.description }"
360+
placement="top"
361361
>
362-
?
363-
</span>
362+
<span class="help-icon" tabindex="0">?</span>
363+
</RichTooltip>
364364
</label>
365365
<input
366366
:id="`${modalId}-${field.name}`"
@@ -378,13 +378,13 @@
378378
<label :for="`${modalId}-${field.name}`">
379379
{{ field.displayName || field.name }}
380380
<span v-if="field.required" class="required-asterisk">*</span>
381-
<span
381+
<RichTooltip
382382
v-if="field.description"
383-
class="help-icon"
384-
:title="field.description"
383+
:content="{ description: field.description }"
384+
placement="top"
385385
>
386-
?
387-
</span>
386+
<span class="help-icon" tabindex="0">?</span>
387+
</RichTooltip>
388388
</label>
389389
<textarea
390390
:id="`${modalId}-${field.name}`"
@@ -402,13 +402,13 @@
402402
<label :for="`${modalId}-${field.name}`">
403403
{{ field.displayName || field.name }}
404404
<span v-if="field.required" class="required-asterisk">*</span>
405-
<span
405+
<RichTooltip
406406
v-if="field.description"
407-
class="help-icon"
408-
:title="field.description"
407+
:content="{ description: field.description }"
408+
placement="top"
409409
>
410-
?
411-
</span>
410+
<span class="help-icon" tabindex="0">?</span>
411+
</RichTooltip>
412412
</label>
413413
<input
414414
:id="`${modalId}-${field.name}`"
@@ -427,13 +427,13 @@
427427
<label :for="`${modalId}-${field.name}`">
428428
{{ field.displayName || field.name }}
429429
<span v-if="field.required" class="required-asterisk">*</span>
430-
<span
430+
<RichTooltip
431431
v-if="field.description"
432-
class="help-icon"
433-
:title="field.description"
432+
:content="{ description: field.description }"
433+
placement="top"
434434
>
435-
?
436-
</span>
435+
<span class="help-icon" tabindex="0">?</span>
436+
</RichTooltip>
437437
</label>
438438
<input
439439
:id="`${modalId}-${field.name}`"
@@ -452,13 +452,13 @@
452452
<label>
453453
{{ field.displayName || field.name }}
454454
<span v-if="field.required" class="required-asterisk">*</span>
455-
<span
455+
<RichTooltip
456456
v-if="field.description"
457-
class="help-icon"
458-
:title="field.description"
457+
:content="{ description: field.description }"
458+
placement="top"
459459
>
460-
?
461-
</span>
460+
<span class="help-icon" tabindex="0">?</span>
461+
</RichTooltip>
462462
</label>
463463
<div class="vars-container">
464464
<button @click="$emit('open-var-modal', field.name)" class="add-var-button">
@@ -507,13 +507,13 @@
507507
<label>
508508
{{ field.displayName || field.name }}
509509
<span v-if="field.required" class="required-asterisk">*</span>
510-
<span
510+
<RichTooltip
511511
v-if="field.description"
512-
class="help-icon"
513-
:title="field.description"
512+
:content="{ description: field.description }"
513+
placement="top"
514514
>
515-
?
516-
</span>
515+
<span class="help-icon" tabindex="0">?</span>
516+
</RichTooltip>
517517
</label>
518518
<div class="list-container">
519519
<button @click="$emit('open-list-item-modal', field.name)" class="add-list-button">
@@ -556,6 +556,7 @@
556556

557557
<script setup>
558558
import { computed, ref } from 'vue'
559+
import RichTooltip from './RichTooltip.vue'
559560
560561
const props = defineProps({
561562
field: {

0 commit comments

Comments
 (0)