將數據從屬性值傳遞到工具提示

我試圖創建一個時間軸，其中包含的項目具有某些屬性，然後需要在工具提示內部懸停時顯示相應的項目。我有時間線工作（我使用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">&nbsp;</div> 
 
</div> 
 

 
<div id="container"> 
 

 
\t <div id="tabmenu"> 
 
    \t &nbsp; 
 
    </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>

來源

2016-05-03 Emleh

哪裏是「.vis項目」？ –

.vis-item是通過在dataSet中創建一個新對象生成的時間軸元素。你可以在這裏找到一個實例：http://visjs.org/examples/timeline/basicUsage.html – Emleh

你可以試試「$（window）.load」而不是「$（document）.ready」嗎？ –

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

來源

2016-05-04 12:14:44

嘿，太棒了！ :-)這讓我更進一步，謝謝！ – Emleh

將數據從屬性值傳遞到工具提示

回答

相關問題