twitter-bootstrap 和 HighCharts 插件之间的冲突答案

【问题标题】：conflict between twitter-bootstrap and HighCharts plugintwitter-bootstrap 和 HighCharts 插件之间的冲突
【发布时间】：2012-10-07 05:39:36
【问题描述】：

我正在使用 twitter-bootstrap 框架来实现它的一些功能，例如工具提示、提前输入和日期选择器。

我也在使用HighCharts插件在同一页面上显示图表。

但两者之间似乎存在某种冲突。由于 HighCharts 代码，引导功能停止工作，并且我在控制台上收到与引导相关的错误：

TypeError: $("a[rel='tooltip']").tooltip is not a function

当我删除 HighCharts 代码时，引导功能会非常好。

所以任何人都可以指导我解决这个问题。

我正在使用以下 js 文件： HighCharts

<script type="text/javascript" src="js/highcharts.js"></script>
<script type="text/javascript" src="js/exporting.js"></script>

<script type="text/javascript" >    
$(function () {
    $(document).ready(function() {                  

        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'chart',
                type: 'column'
            },
            title: {
                text: 'Monthly Expenditure'
            },
            subtitle: {
                text: ''
            },
            xAxis: {
                categories: ['Months'],
                title: {
                    text: null
                }
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Expenditure',
                    align: 'high'
                },
                labels: {
                    overflow: 'justify'
                }
            },
            tooltip: {
                formatter: function() {
                    return ''+
                        this.series.name +': '+ this.y +' (local currency)';
                }
            },
            plotOptions: {
                bar: {
                    dataLabels: {
                        enabled: true
                    }
                }
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'top',
                x: -100,
                y: 100,
                floating: true,
                borderWidth: 1,
                backgroundColor: '#FFFFFF',
                shadow: true
            },
            credits: {
                enabled: false
            },
            series: <?=json_encode($series);?>                       
        });
    });

});
</script>

引导

<script type="text/javascript" src="js/jquery-1.8.0.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <link href="css/bootstrap-responsive.css" rel="stylesheet">
    <link href="css/bootstrap.css" rel="stylesheet">

【问题讨论】：

你能发布你的highcharts代码吗？
@c0deNinja 添加了 highcharts 代码。
你是在 Highcharts 之前加载 jQuery 吗？
是的，我是！你认为这就是原因吗！？
no... 应该首先加载 jQuery。您是否重组了 highcharts 文件？因为exporting.js 应该在modules/exporting.js 之下。

标签： jquery jquery-ui twitter-bootstrap highcharts

【解决方案1】：

我将 Twitter 引导工具提示与 HighCharts 一起使用。该方法是向我们希望使用 Twitter 工具提示的所有元素添加一个类，并将 title 属性添加到包含工具提示中所需文本的元素。在我们的例子中，我们为图表图例和图表标题执行此操作。我们使用 mouseover 事件处理程序来设置工具提示：

$(function () {
$.fn.tooltip.defaults.placement = "bottom";
$.fn.tooltip.defaults.delay = {
    show: 500,
    hide: 50
};
$.fn.tooltip.defaults.html = true;

//read more at http://stackoverflow.com/questions/8678755
$(document.body).delegate(".Tipsy", "mouseover", function (evt) {
    var elt = $(this).closest(".Tipsy");
    elt.removeClass("Tipsy").addClass("Tipsified");
    elt.tooltip(); //set up tooltip
    elt.tooltip("fixTitle"); //fix titles
    var timeout = setTimeout(function () {
        elt.off("mouseleave.autotipify").tooltip("show");
    }, 500);
    //if the user moves out before tooltip shows
    $(this).on("mouseleave.autotipify", function (evt2) {
        clearTimeout(timeout);
    });

});
//clicking on a trigger should cause the tip to disappear
$(document.body).delegate(".Tipsified", "click", function (evt) {
    $(this).tooltip("hide");
});

});

【讨论】：