Bootstrap Tooltip在iOS/Android设备上无法正常工作的问题求助

数据老陈

2026-8-6

问题

使用Bootstrap 5.1（内置Popper.js）实现的Tooltip组件在桌面端Chrome、Firefox、Edge浏览器中运行正常，但在iOS（iPhone、iPad）、Android（诺基亚Blue）设备及各类BrowserStack测试设备上均无法正常工作。

HTML代码

<div class="d-block pb-3">
    <button class="btn-submit btn btn-primary d-inline-block mt-3 align-middle" type="submit" id="calc1" style="width:92px;">Calculate</button>
    <span class="d-inline-block mt-3 px-1 align-middle" style="width:4px;"></span>
    <input id="res1" type="text" class="results form-control d-inline-block mt-3 align-middle" readonly>
    <span id="clippy1" class="clippy clippy-with" data-clipboard-target="#res1">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-clipboard" viewBox="0 0 16 16">
            <path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/>
             <path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/>
        </svg>
    </span>
    <span class="d-inline-block mt-3 ps-2 align-middle" style="width:16px;"> </span>
</div>

JS代码（main.js）

$(document).ready(function(){

    function clipboard_handler(e) {
        var t = "#" + e.trigger.id,
            f = $(t).closest("form"),
            i = f.find(".clippy"),
            b = f.find("[readonly]");
        b.blur();

        if (e.text == "") {
            i.empty().append('<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x" viewBox="0 0 16 16"><path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/></svg>');
            setTimeout(() => {
                i.empty().append('<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-clipboard" viewBox="0 0 16 16"><path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/><path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/></svg>');
            }, 600);
        } else {
            i.empty().append('<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check" viewBox="0 0 16 16"><path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z"/></svg>');
            i.tooltip({title: "Copied!", delay: { "show": "1", "hide": "600" }});
            setTimeout(() => {
                i.empty().append('<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-clipboard" viewBox="0 0 16 16"><path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/><path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/></svg>');
                i.tooltip("dispose");
            }, 600);
        }
    }


    $(".clippy").on('click touchstart tap',function(){
        clipboard.on('success', function(e) {
            clipboard_handler(e);
            e.clearSelection();
        });
        clipboard.on('error', function(e) {
            clipboard_handler(e);
        });
    });
});

引入的脚本文件

<script src="jquery-3.6.0.min.js"></script>
<script src="bootstrap.bundle.min.js"></script>
<script src="clipboard.min.js"></script>
<script src="main.js"></script>

补充说明

已检查BrowserStack会话的控制台日志，未发现报错信息；修改Tooltip初始化代码为以下内容后，移动端问题仍未解决，桌面端依旧正常：

i.tooltip({title: "Copied!"});
setTimeout(() => {
    i.tooltip("dispose");
}, 600);

解决方案

核心问题分析

移动端Tooltip失效主要源于三点：

Bootstrap 5默认Tooltip在移动端需手动触发，触摸设备事件机制与桌面端存在差异
动态替换SVG元素会破坏Tooltip绑定的DOM节点关联
事件绑定逻辑重复注册，导致触发异常

修复步骤

1. 提前初始化Tooltip，避免动态绑定问题

页面加载时就为所有.clippy元素初始化Tooltip，设置触发方式为manual（手动控制显示/隐藏）：

$(document).ready(function(){
    // 提前初始化所有clippy的Tooltip
    $(".clippy").tooltip({
        title: "Copied!",
        trigger: "manual",
        delay: { show: 1, hide: 600 }
    });

    // ... 后续逻辑
});

2. 修改Tooltip控制逻辑，复用已初始化实例

不需要每次复制时重新创建Tooltip，直接调用show()/hide()方法：

function clipboard_handler(e) {
    var t = "#" + e.trigger.id,
        f = $(t).closest("form"),
        i = f.find(".clippy"),
        b = f.find("[readonly]");
    b.blur();

    if (e.text == "") {
        // 错误状态逻辑保持不变
        i.empty().append('<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x" viewBox="0 0 16 16"><path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/></svg>');
        setTimeout(() => {
            i.empty().append('<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-clipboard" viewBox="0 0 16 16"><path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/><path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/></svg>');
        }, 600);
    } else {
        i.empty().append('<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check" viewBox="0 0 16 16"><path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z"/></svg>');
        // 直接显示已初始化的Tooltip
        i.tooltip("show");
        setTimeout(() => {
            i.empty().append('<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-clipboard" viewBox="0 0 16 16"><path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/><path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/></svg>');
            // 隐藏Tooltip
            i.tooltip("hide");
        }, 600);
    }
}

3. 修复事件绑定逻辑，避免重复注册

将Clipboard事件绑定移出点击事件外，只执行一次：

$(document).ready(function(){
    // 提前初始化Tooltip
    $(".clippy").tooltip({
        title: "Copied!",
        trigger: "manual",
        delay: { show: 1, hide: 600 }
    });

    // 初始化Clipboard实例（补充原代码缺失的实例化逻辑）
    const clipboard = new ClipboardJS('.clippy');

    // 仅绑定一次Clipboard事件
    clipboard.on('success', function(e) {
        clipboard_handler(e);
        e.clearSelection();
    });
    clipboard.on('error', function(e) {
        clipboard_handler(e);
    });

    // 点击事件保留必要交互（若无额外逻辑可直接移除）
    $(".clippy").on('click touchstart

Bootstrap Tooltip在iOS/Android设备上无法正常工作的问题求助

HTML代码 #

JS代码（main.js） #

引入的脚本文件 #

补充说明 #

核心问题分析 #

修复步骤 #