Bootstrap Tour报错：Uncaught TypeError: 无法读取未定义属性'tip'

数据老陈

2026-7-11

解决Bootstrap Tour无法显示步骤内容的'tip'未定义错误

问题分析

你遇到的Cannot read properties of undefined (reading 'tip')错误，核心原因是Bootstrap Tour版本与Bootstrap版本不兼容，或者Bootstrap的popover组件未正确加载。Bootstrap Tour 0.12.0依赖Bootstrap 3.x的popover API，若使用Bootstrap 4+版本，两者的popover实现差异会触发该错误。

解决方案

1. 匹配Bootstrap版本

确保使用Bootstrap 3.x版本（与Bootstrap Tour 0.12.0兼容），严格遵循加载顺序：jQuery → Bootstrap CSS → Bootstrap JS → Bootstrap Tour JS。

2. 确认Bootstrap包含popover组件

若使用自定义构建的Bootstrap，需确保包含popover插件。直接使用官方完整Bootstrap JS CDN可避免此问题。

3. 显式指定Tour模板

尝试手动指定popover模板，确保Tour能正确渲染内容：

var labtour = new Tour({
    name: "labtour",
    storage: window.localStorage,
    debug: true,
    template: "<div class='popover tour'>" +
                "<div class='arrow'></div>" +
                "<h3 class='popover-title'></h3>" +
                "<div class='popover-content'></div>" +
                "<div class='popover-navigation'>" +
                  "<button class='btn btn-default' data-role='prev'>« Prev</button>" +
                  "<span data-role='separator'>|</span>" +
                  "<button class='btn btn-default' data-role='next'>Next »</button>" +
                  "<button class='btn btn-default' data-role='end'>End tour</button>" +
                "</div>" +
              "</div>"
});