Question

我正在尝试创建一个时间轴，其中包含具有某些属性的项目，这些属性需要在将鼠标悬停在相应项目上时显示在工具提示中。我有时间线工作（我使用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">
	<div id="menu">&nbsp;</div>
</div>

<div id="container">

	<div id="tabmenu">
    	&nbsp;
    </div>
    
    <div id="timeline-block">
    	<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'},
	{id: 2, content: 'Versie 2.0', start: '2016-01-01', end: '2016-05-18', className: 'suspended', subject: 'Name2', object: 'Car'},
	{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 = {
	  width: '100%',
	  rtl: true,
	  showCurrentTime: true,
	  stack: false,
	  zoomMax: 150000000000,
	  zoomMin: 200,
	  dataAttributes: 'all'
	  };

  // 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); };
	
</script>

<script type="text/javascript">
  $(document).ready(function() {
	  
    Tipped.create('.vis-item', 'Some tooltip text');
	
  });
</script>

</div>

</body>

</html>

Answer 1

A function can be used as content for the tooltip. It should return the content to be pushed into the tooltip. The first argument within the function refers to the element the tooltip was created for ：

http://www.tippedjs.com/documentation#usage_functions

   Tipped.create('.vis-item', function(e) {
      var itemId = $(e).attr('data-id');
      var item = items.get(itemId);
      return {
        title: item.object + ' ' + item.subject,
        content: item.content
      }
   }, {
      cache: false
   });

[https://jsfiddle.net/3ynhek29/]

将数据从属性值传递到工具提示

1 个答案: