2017-04-17 19 views
0

vis.jsタイムラインを使用してタイムラインを作成しました。ボタン全体にマウスを重ねるだけで、ツールチップを作成する必要があります。私はタイトルをapplicate。ツールチップが表示されますが、アイテム全体に適用されました。私はアイテム全体ではなくボタンの上にマウスを置いたときにのみアプライドされたツールチップが必要です。vis.jsタイムラインの項目にボタンのマウスオーバーを使用した場合のみ、ツールチップを作成できます

答えて

1

visタイムラインの設定で「テンプレート」機能を使用できます。テンプレート関数では、アイテムテンプレートの外観を変更することができます。そこで、ボタンを追加してイベントリスナを追加することができます。

template: function(item) { 
    var itemTmp = document.createElement('div'); 
    itemTmp.innerHTML = item.content + ' '; 
    var btn = document.createElement('button'); 
    btn.innerText = 'Hover Me!'; 
    btn.addEventListener('mouseover', function() { 
    btn.innerText = 'Done!'; 
    }); 
    btn.addEventListener('mouseout', function() { 
    btn.innerText = 'Hover Me!'; 
    }); 
    itemTmp.appendChild(btn); 
    return itemTmp; 
} 

全例: http://jsfiddle.net/tagisen/qp3dwrzn/

が、これは

を役に立てば幸い
関連する問題