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

Question

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

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

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

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

当我删除 HighCharts 代码时， Bootstrap 功能就完美地出现了。

谁能指导我解决这个问题。

我使用以下 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>

Bootstrap

<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">

Answer 1

我将 Twitter Bootstrap 工具提示与 HighCharts 结合使用。该方法是向我们想要使用 Twitter 工具提示的所有元素添加一个类，并将 title 属性添加到包含工具提示中所需文本的元素。在我们的例子中，我们对图表图例和图表标题执行此操作。我们使用鼠标悬停事件处理程序来设置工具提示:

$(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");
});

});