Question

我正在使用twitter-bootstrap框架，其功能很少，例如tooltip，typeahead和datepicker。

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

但两者之间似乎存在某种冲突。由于HighCharts代码，Bootstrap功能停止工作，我在与bootstrap相关的控制台上出现错误：

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

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

}）;

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

1 个答案: