github/ChatDev
1
0
Fork 0
mirror of https://github.com/OpenBMB/ChatDev.git synced 2026-08-01 10:56:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: use RichTooltip for help icons in form fields

Browse Source 
Replace native HTML title attributes on help icons with the
existing RichTooltip component for consistent cross-browser
tooltip behavior. The native title attribute has inconsistent
behavior across Safari and Edge, causing help tooltips to not
appear when users interact with the question mark icons.

Fixes #538
This commit is contained in:
Br1an67 2026-03-02 01:12:44 +08:00
parent 6fe4fd1a0a
commit 4137ce1ac9
1 changed files with 56 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

111
frontend/src/components/DynamicFormField.vue
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: {