Übergeben von Daten aus Attributwerten in Tooltip

Ich versuche, eine Zeitleiste zu erstellen, die Elemente mit bestimmten Attributen enthält, die dann in einem Tooltip angezeigt werden müssen, wenn Sie den Mauszeiger über das entsprechende Element bewegen. Ich habe die Zeitleiste zu arbeiten (ich verwendete vis.js), aber kann nicht die Attributwerte (dynamisch) in den Tooltips für jedes Element angezeigt werden. Ich habe versucht, tiped.js zu verwenden, die Dokumentation dafür finden Sie here. Gemessen an der Dokumentation sollte es sicherlich möglich sein, aber mein Wissen über jQuery/Javascript ist nicht umfangreich genug, um es zu tun ... Könnte jemand dabei helfen?Übergeben von Daten aus Attributwerten in Tooltip

Die HTML, die ich jetzt habe, kann unten gesehen werden. Ich habe eine separate Skript-Tag am unteren Rand des Körpers für den Tooltip-Code enthalten. Im Moment zeigen alle Tooltips den in diesem Code definierten Text an. Die Attribute, die ich für jeden Tooltip anzeigen möchte, sind Inhalt, Start, Ende, Objekt, Subjekt (wie im Datasat für die Zeitleiste definiert), vorzugsweise in Form einer Tabelle.

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

Quelle

2016-05-03 Emleh

Wo ist ".vis Punkt"? –

.vis-item ist das Zeitachsenelement, das beim Erstellen eines neuen Objekts im dataSet generiert wird. Ein Live-Beispiel finden Sie hier: http://visjs.org/examples/timeline/basicUsage.html – Emleh

Können Sie "$ (window) .load" statt "$ (document) .ready" ausprobieren? –

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

Quelle

2016-05-04 12:14:44

Hey, das ist großartig! :-) Das hat mir einen großen Schritt weiter gebracht, danke! – Emleh

Übergeben von Daten aus Attributwerten in Tooltip

Antwort

Verwandte Themen