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

Question

我正在尝试创建一个时间线，其中包含具有某些属性的项目，当将鼠标悬停在相应的项目上时，这些属性需要显示在工具提示中。我有工作时间表（我使用 vis.js), but can't get the attribute values to display (dynamically) in the tooltips for each item. I have been trying to use tipped.js, the documentation for this can be found here。从文档来看，这当然是可能的，但我对 jQuery/Javascript 的了解还不够广泛，无法做到这一点...有人可以帮忙吗？

我现在的HTML可以在下面查看。我在工具提示代码的正文底部包含了一个单独的脚本标签。现在所有的工具提示都显示这段代码中定义的文本。我想为每个工具提示显示的属性是内容、开始、结束、对象、主题（在时间线的数据中定义），最好是 table 的形式。

<!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/]

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

Passing data from attribute values into tooltip

javascript

jquery

tooltip

vis.js

tipped