Merge pull request #557 from Br1an67/fix/issue-538-safari-tooltip

fix: use RichTooltip for help icons in Safari/Edge
This commit is contained in:
Shu Yao 2026-03-11 11:56:59 +08:00 committed by GitHub
commit 980f6249fa
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -5,13 +5,13 @@
<label> <label>
{{ field.displayName || field.name }} {{ field.displayName || field.name }}
<span v-if="field.required" class="required-asterisk">*</span> <span v-if="field.required" class="required-asterisk">*</span>
<span <RichTooltip
v-if="field.description" v-if="field.description"
class="help-icon" :content="{ description: field.description }"
:title="field.description" placement="top"
> >
? <span class="help-icon" tabindex="0">?</span>
</span> </RichTooltip>
</label> </label>
<div class="child-node-container"> <div class="child-node-container">
<div class="child-node-controls"> <div class="child-node-controls">
@ -120,13 +120,13 @@
<label> <label>
{{ field.displayName || field.name }} {{ field.displayName || field.name }}
<span v-if="field.required" class="required-asterisk">*</span> <span v-if="field.required" class="required-asterisk">*</span>
<span <RichTooltip
v-if="field.description" v-if="field.description"
class="help-icon" :content="{ description: field.description }"
:title="field.description" placement="top"
> >
? <span class="help-icon" tabindex="0">?</span>
</span> </RichTooltip>
</label> </label>
<div class="child-node-container"> <div class="child-node-container">
<div class="child-node-controls"> <div class="child-node-controls">
@ -232,13 +232,13 @@
<label :for="`${modalId}-${field.name}`"> <label :for="`${modalId}-${field.name}`">
{{ field.displayName || field.name }} {{ field.displayName || field.name }}
<span v-if="field.required" class="required-asterisk">*</span> <span v-if="field.required" class="required-asterisk">*</span>
<span <RichTooltip
v-if="field.description" v-if="field.description"
class="help-icon" :content="{ description: field.description }"
:title="field.description" placement="top"
> >
? <span class="help-icon" tabindex="0">?</span>
</span> </RichTooltip>
</label> </label>
<div class="custom-select-wrapper" :class="{ 'select-disabled': isReadOnly }"> <div class="custom-select-wrapper" :class="{ 'select-disabled': isReadOnly }">
<input <input
@ -291,13 +291,13 @@
<label> <label>
{{ field.displayName || field.name }} {{ field.displayName || field.name }}
<span v-if="field.required" class="required-asterisk">*</span> <span v-if="field.required" class="required-asterisk">*</span>
<span <RichTooltip
v-if="field.description" v-if="field.description"
class="help-icon" :content="{ description: field.description }"
:title="field.description" placement="top"
> >
? <span class="help-icon" tabindex="0">?</span>
</span> </RichTooltip>
</label> </label>
<div class="multi-select-options"> <div class="multi-select-options">
<label <label
@ -328,13 +328,13 @@
<label :for="`${modalId}-${field.name}`" class="switch-label-text"> <label :for="`${modalId}-${field.name}`" class="switch-label-text">
{{ field.displayName || field.name }} {{ field.displayName || field.name }}
<span v-if="field.required" class="required-asterisk">*</span> <span v-if="field.required" class="required-asterisk">*</span>
<span <RichTooltip
v-if="field.description" v-if="field.description"
class="help-icon" :content="{ description: field.description }"
:title="field.description" placement="top"
> >
? <span class="help-icon" tabindex="0">?</span>
</span> </RichTooltip>
</label> </label>
<label class="switch-container"> <label class="switch-container">
<input <input
@ -354,13 +354,13 @@
<label :for="`${modalId}-${field.name}`"> <label :for="`${modalId}-${field.name}`">
{{ field.displayName || field.name }} {{ field.displayName || field.name }}
<span v-if="field.required" class="required-asterisk">*</span> <span v-if="field.required" class="required-asterisk">*</span>
<span <RichTooltip
v-if="field.description" v-if="field.description"
class="help-icon" :content="{ description: field.description }"
:title="field.description" placement="top"
> >
? <span class="help-icon" tabindex="0">?</span>
</span> </RichTooltip>
</label> </label>
<input <input
:id="`${modalId}-${field.name}`" :id="`${modalId}-${field.name}`"
@ -378,13 +378,13 @@
<label :for="`${modalId}-${field.name}`"> <label :for="`${modalId}-${field.name}`">
{{ field.displayName || field.name }} {{ field.displayName || field.name }}
<span v-if="field.required" class="required-asterisk">*</span> <span v-if="field.required" class="required-asterisk">*</span>
<span <RichTooltip
v-if="field.description" v-if="field.description"
class="help-icon" :content="{ description: field.description }"
:title="field.description" placement="top"
> >
? <span class="help-icon" tabindex="0">?</span>
</span> </RichTooltip>
</label> </label>
<textarea <textarea
:id="`${modalId}-${field.name}`" :id="`${modalId}-${field.name}`"
@ -402,13 +402,13 @@
<label :for="`${modalId}-${field.name}`"> <label :for="`${modalId}-${field.name}`">
{{ field.displayName || field.name }} {{ field.displayName || field.name }}
<span v-if="field.required" class="required-asterisk">*</span> <span v-if="field.required" class="required-asterisk">*</span>
<span <RichTooltip
v-if="field.description" v-if="field.description"
class="help-icon" :content="{ description: field.description }"
:title="field.description" placement="top"
> >
? <span class="help-icon" tabindex="0">?</span>
</span> </RichTooltip>
</label> </label>
<input <input
:id="`${modalId}-${field.name}`" :id="`${modalId}-${field.name}`"
@ -427,13 +427,13 @@
<label :for="`${modalId}-${field.name}`"> <label :for="`${modalId}-${field.name}`">
{{ field.displayName || field.name }} {{ field.displayName || field.name }}
<span v-if="field.required" class="required-asterisk">*</span> <span v-if="field.required" class="required-asterisk">*</span>
<span <RichTooltip
v-if="field.description" v-if="field.description"
class="help-icon" :content="{ description: field.description }"
:title="field.description" placement="top"
> >
? <span class="help-icon" tabindex="0">?</span>
</span> </RichTooltip>
</label> </label>
<input <input
:id="`${modalId}-${field.name}`" :id="`${modalId}-${field.name}`"
@ -452,13 +452,13 @@
<label> <label>
{{ field.displayName || field.name }} {{ field.displayName || field.name }}
<span v-if="field.required" class="required-asterisk">*</span> <span v-if="field.required" class="required-asterisk">*</span>
<span <RichTooltip
v-if="field.description" v-if="field.description"
class="help-icon" :content="{ description: field.description }"
:title="field.description" placement="top"
> >
? <span class="help-icon" tabindex="0">?</span>
</span> </RichTooltip>
</label> </label>
<div class="vars-container"> <div class="vars-container">
<button @click="$emit('open-var-modal', field.name)" class="add-var-button"> <button @click="$emit('open-var-modal', field.name)" class="add-var-button">
@ -507,13 +507,13 @@
<label> <label>
{{ field.displayName || field.name }} {{ field.displayName || field.name }}
<span v-if="field.required" class="required-asterisk">*</span> <span v-if="field.required" class="required-asterisk">*</span>
<span <RichTooltip
v-if="field.description" v-if="field.description"
class="help-icon" :content="{ description: field.description }"
:title="field.description" placement="top"
> >
? <span class="help-icon" tabindex="0">?</span>
</span> </RichTooltip>
</label> </label>
<div class="list-container"> <div class="list-container">
<button @click="$emit('open-list-item-modal', field.name)" class="add-list-button"> <button @click="$emit('open-list-item-modal', field.name)" class="add-list-button">
@ -556,6 +556,7 @@
<script setup> <script setup>
import { computed, ref } from 'vue' import { computed, ref } from 'vue'
import RichTooltip from './RichTooltip.vue'
const props = defineProps({ const props = defineProps({
field: { field: {