0
特定の属性を持つアイテムを含むタイムラインを作成しようとしていますが、対応するアイテム上にカーソルを置いたときにツールチップ内に表示する必要があります。私は作業するタイムラインを持っています（vis.jsを使用しました）が、各アイテムのツールチップに（動的に）表示する属性値を取得することはできません。私はtipped.jsを使用しようとしていますが、これに関するドキュメントはhereです。ドキュメントで判断すると確かに可能ですが、jQuery/Javascriptについての知識は十分ではありません...誰かがこれを手伝ってもらえますか？属性値からツールチップへのデータの受け渡し
私が今使っているHTMLは、以下で見ることができます。私はツールチップのコードのためにボディーの下部に別のスクリプトタグを入れました。今すぐすべてのツールチップにこのコードで定義されたテキストが表示されます。各ツールチップに表示される属性は、コンテンツ、開始、終了、オブジェクト、件名（タイムラインのデータセットで定義されています）です。好ましくは表の形式です。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test1</title>
<script type="text/javascript" src="include/vis.js"></script>
<script type="text/javascript" src="include/jquery-1.12.3.min.js"></script>
<script type="text/javascript" src="include/tipped.js"></script>
<link href="include/style.css" rel="stylesheet" type="text/css">
<link href="include/vis.css" rel="stylesheet" type="text/css">
<link href="include/tipped.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="header">
\t <div id="menu"> </div>
</div>
<div id="container">
\t <div id="tabmenu">
\t
</div>
<div id="timeline-block">
\t <h2>Timeline</h2>
<div id="timeline">
<div class="menu">
<input type="button" id="zoomIn" value="Zoom in"/>
<input type="button" id="zoomOut" value="Zoom out"/>
<input type="button" id="moveLeft" value="Move right"/>
<input type="button" id="moveRight" value="Move left"/>
</div>
</div>
</div>
<script type="text/javascript">
// DOM element where the Timeline will be attached
var container = document.getElementById('timeline');
// Create a DataSet (allows two way data-binding)
var items = new vis.DataSet([
{id: 1, content: 'Versie 1.0', start: '2015-01-01', end: '2016-01-01', subject: 'Name1', object: 'Car'},
\t {id: 2, content: 'Versie 2.0', start: '2016-01-01', end: '2016-05-18', className: 'suspended', subject: 'Name2', object: 'Car'},
\t {id: 3, content: 'Versie 3.0', start: '2016-05-18', end: '2016-12-29', className: 'current', subject: 'Name3', object: 'Car'},
]);
// Configuration for the Timeline
var options = {
\t width: '100%',
\t rtl: true,
\t showCurrentTime: true,
\t stack: false,
\t zoomMax: 150000000000,
\t zoomMin: 200,
\t dataAttributes: 'all'
\t };
// Create a Timeline
var timeline = new vis.Timeline(container, items, options);
/**NAVIGATION BUTTONS
* Move the timeline a given percentage to left or right
* @param {Number} percentage For example 0.1 (left) or -0.1 (right)
*/
function move (percentage) {
var range = timeline.getWindow();
var interval = range.end - range.start;
timeline.setWindow({
start: range.start.valueOf() - interval * percentage,
end: range.end.valueOf() - interval * percentage
});
}
/**
* Zoom the timeline a given percentage in or out
* @param {Number} percentage For example 0.1 (zoom out) or -0.1 (zoom in)
*/
function zoom (percentage) {
var range = timeline.getWindow();
var interval = range.end - range.start;
timeline.setWindow({
start: range.start.valueOf() - interval * percentage,
end: range.end.valueOf() + interval * percentage
});
}
// attach events to the navigation buttons
document.getElementById('zoomIn').onclick = function() { zoom(-0.2); };
document.getElementById('zoomOut').onclick = function() { zoom(0.2); };
document.getElementById('moveLeft').onclick = function() { move(0.2); };
document.getElementById('moveRight').onclick = function() { move(-0.2); };
\t
</script>
<script type="text/javascript">
$(document).ready(function() {
\t
Tipped.create('.vis-item', 'Some tooltip text');
\t
});
</script>
</div>
</body>
</html>
場所 ".vis項目が"？ –
.vis-itemは、dataSetに新しいオブジェクトを作成して生成されたタイムライン要素です。実際の例はhttp://visjs.org/examples/timeline/basicUsage.html – Emleh
"$（document）.ready"ではなく "$（window）.load"を試すことができますか？ –