2

ツールチップ、タイプアヘッド、日付ピッカーなどのいくつかの機能に 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">
4

1 に答える 1

0

私は HighCharts で Twitter ブートストラップ ツールチップを使用しています。この方法は、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");
});

});

于 2013-04-10T12:53:05.757 に答える