如何在Svelte中通过on:click实现点击显示面包数据Tooltip？

问题场景 #

我正在为可视化项目创建Tooltip，希望通过on:click事件点击图片时，展示JSON文件breadData中的对应数据。使用Svelte开发，已编写handleClick函数，console.log能正常输出breadData[i]，但尝试编写的Tooltip代码无显示效果，请问函数内部应如何编写？

现有代码 #

初始点击处理函数 #

const handleClick = (i) => {
    console.log(breadData[i])
}

图片循环渲染代码 #

{#each album as img, i}
<img class='tile {hilited[index].includes(i)?'hilited':'faded'}' src='./img/{img}' alt='Bread picture' on:click={() => handleClick(i)}/>
{/each}

尝试过的无效代码 #

const handleClick = (i) => {
    const data = breadData[i];
    const tooltip = document.querySelector(`#tooltip-${i}`);
    tooltip.innerHTML = `<div>Name: ${data.bread}</div><div>Day: ${data.day}</div>`;
    tooltip.style.display = 'block';
};

解决方案 #

在Svelte里，不要直接操作DOM，用响应式状态管理Tooltip的显示才是正确做法，步骤如下：

1. 定义响应式变量，用来控制Tooltip的激活状态和内容

// Svelte会自动处理let声明变量的响应式
let activeIndex = null;
let currentBread = null;

2. 修改handleClick函数，更新响应式变量

const handleClick = (i) => {
    // 点击同一图片可切换显示/隐藏，不需要该逻辑可直接赋值
    if (activeIndex === i) {
        activeIndex = null;
        currentBread = null;
    } else {
        activeIndex = i;
        currentBread = breadData[i];
    }
};

3. 在循环渲染中加入Tooltip元素，通过响应式变量控制显示

{#each album as img, i}
<!-- 用容器包裹图片和Tooltip，确保定位关系正确 -->
<div class="image-wrapper">
    <img 
        class='tile {hilited[index].includes(i)?'hilited':'faded'}' 
        src='./img/{img}' 
        alt='Bread picture' 
        on:click={() => handleClick(i)}
    />
    <!-- 仅当前索引激活且有数据时显示Tooltip -->
    {#if activeIndex === i && currentBread}
        <div class="tooltip">
            <div>Name: {currentBread.bread}</div>
            <div>Day: {currentBread.day}</div>
        </div>
    {/if}
</div>
{/each}

4. 给Tooltip添加基础样式（确保正常显示）

.image-wrapper {
    position: relative;
    display: inline-block;
    margin: 10px;
}

.tooltip {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 8px 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    z-index: 1000;
}

无效代码的问题原因 #

• 模板中未定义#tooltip-${i}对应的元素，自然找不到DOM节点
• Svelte的DOM更新由响应式系统控制，手动操作DOM会和框架更新逻辑冲突，导致元素无法正确渲染

内容的提问来源于stack exchange，提问作者Charlene