工具提示被隐藏在时间线点后面

时间：2019-07-12 19:31:43

标签： css vis.js

我有vis.js时间轴设置，并且正在使用自定义工具提示在时间轴上使用点项。工具提示被隐藏为时间轴上的项目。奇怪的是，工具提示在时间轴上的前6-7个点表现出预期的效果，然后开始落后于时间轴点项。

body {
font: 10pt arial;
}
.timeline-bg {
background-image: url(assets/images/time-bg.jpg);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
.timeline-header {
    background: #044c60;
    color:#fff;
    text-align: center;
    font-size: 20px;
    padding: 10px;
}
.zoom-nav {
    float: right;
    cursor: pointer;
}
.zoom-nav-left {
    float: left;
    cursor: pointer;
}
#moveLeft,#moveRight {
    font-size:16px;
}
.vis-january, .vis-february, .vis-march, .vis-april, .vis-may, .vis-june, .vis-july, .vis-august, .vis-september, .vis-october, .vis-november, .vis-december {
font-weight: 700;
color: #044c60 !important;
}
.container {
  width: 30px;
  text-align: center;

}
.container-today {
  width: 17px;
  text-align: center;
}
.milestone {
  border:6px solid #d9d9d9 !important;
  border-radius:50%;
  color:#044c60 !important;
  background: #fff !important;
  margin: 30px 0 0 -10px !important;
}
.milestone .fas {
    font-size:25px;
}
.milestone-past {
  border:6px solid #05a0a0 !important;
  border-radius:50%;
  color:#05a0a0 !important;
  background: #fff !important;
  margin: 30px 0 0 -10px !important;
}
.milestone-past .fas {
    font-size:25px;
}
.milestone-past-check {
    position: absolute;
    top:-18px;
    left:-12px;
    z-index: 10;
    color: #fff;
    background: #05a0a0;

    border-radius: 50%;
    padding: 3px;
    width: 15px;
}
.milestone-past-check .fas {
    font-size:12px;
}
.milestone-started {
    position: absolute;
    top:-18px;
    left:-12px;
    z-index: 10;
    color: #fff;
    background: #044c60;
    font-size: 12px;
    border-radius: 50%;
    padding: 3px;
    width: 15px;
}
.milestone-started .fas {
    font-size:12px;
}
.today {
  border:6px solid #044c60 !important;
  background: #fff !important;
  color: #044c60 !important;
  border-radius:50%;      
  margin: 35px 0 0 -3px !important;
}
.task {
  color:#044c60 !important;
  margin: 42px 0 0 6px !important;
}
.task-past {
  color:#fff !important;
  margin: 42px 0 0 4px !important;
}
.vis-item.vis-dot {
  display: none;
}
.vis-background {

}
.vis-item.vis-background {
  height: 20px !important;
  position: absolute !important;
  top: 54.5px !important;
  background-color: #d9d9d9;
}
.vis-item.vis-background.blue {
  background-color: #05a0a0 !important;
}
.vis-time-axis .vis-grid.vis-vertical {
    border:0 !important;
}
.vis-time-axis .vis-text {
    margin-left: -3px;
}

/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
  cursor: pointer;
  z-index: 10000;
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 200px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px; 
  /* Position the tooltip text - see examples below! */
  position:absolute;
  top:50%;
  left:100%;
  transform:translate(0, -50%);
  margin-left:20px;
  z-index: 10000;
  /*margin-top: 8px;*/
}

.tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  right: 100%;
  top:50%;
  margin-top: -5px;
  /*margin-left: -10px;*/
  border-width: 5px;
  border-style: solid;
  border-color: transparent black transparent transparent;
  z-index: 10000;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
}

    <!DOCTYPE HTML>
<html>
<head>
  <title>Timeline | Background areas</title>

  <script src="assets/javascripts/visjs/vis.js"></script>
  <link href="assets/stylesheets/visjs/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

</head>
<body>

<div id="timeline-wrapper">
    <div class="timeline-header"><div class="zoom-nav-left"><span id="moveLeft"><i class="fas fa-chevron-left"></i> Previous</span></div>Timeline<div class="zoom-nav"><span id="moveRight">Next <i class="fas fa-chevron-right"></i></span> <span id="zoomIn"><i class="fas fa-search-plus"></i></span> <span id="zoomOut"><i class="fas fa-search-minus"></i></span></div></div>
    <div id="visualization" class="timeline-bg"></div>
</div>
<script>

  var items = new vis.DataSet([
    {id: 'A', content: '', start: '2019-01-01', end: '2019-12-31', type: 'background', className: 'gray'},
    {id: 'B', content: '', start: '2019-01-01', end: '2019-04-17', type: 'background', className: 'blue'},
    {id: 1, content: '<div class="tooltip"><i class="fas fa-check"></i><span class="tooltiptext">Complete<br>Task 1 - 3 April 2019</span></div>', start: '2019-04-03', className: 'task-past', type: 'point'},
    {id: 2, content: '<div class="tooltip"><i class="fas fa-check"></i><span class="tooltiptext">Complete<br>Task 2 - 9 April 2019</span></div>', start: '2019-04-09', className: 'task-past', type: 'point'},
    {id: 3, content: '<div class="container tooltip"><span class="milestone-past-check"><i class="fas fa-check"></i></span><i class="fas fa-atlas"></i><span class="tooltiptext">Complete<br>Visa Renewal - 14 April 2019</span></div>', start: '2019-04-14', className: 'milestone-past', type: 'point'},
    {id: 4, content: '<div class="container-today tooltip"><i class="fas fa-male"></i><span class="tooltiptext">Today</span></div>', start: '2019-04-17', className: 'today', type: 'point'},
    {id: 5, content: '<div class="tooltip"><i class="fas fa-circle"></i><span class="tooltiptext">My Text</span></div>', start: '2019-04-19', className: 'task', type:'point'},
    {id: 6, content: '<div class="tooltip"><i class="fas fa-circle"></i><span class="tooltiptext">My Text</span></div>', start: '2019-05-01', className: 'task', type:'point'},
    {id: 7, content: '<div class="tooltip"><i class="fas fa-circle"></i><span class="tooltiptext">My Text<br>test<br>test</span></div>', start: '2019-05-09', className: 'task', type:'point'},
    {id: 8, content: '<div class="container tooltip"><span class="milestone-started"><i class="fas fa-spinner"></i></span><i class="fas fa-sign"></i><span class="tooltiptext">My Text</span></div>', start: '2019-05-16', className: 'milestone', type:'point'},
    {id: 9, content: '<div class="tooltip"><i class="fas fa-circle"></i><span class="tooltiptext">My Text</span></div>', start: '2019-05-26', className: 'task', type:'point'},
    {id: 10, content: '<div class="tooltip"><i class="fas fa-circle"></i><span class="tooltiptext">My Text</span></div>', start: '2019-06-06', className: 'task', type:'point'},
    {id: 11, content: '<div class="container tooltip"><i class="fas fa-map-marker-alt"></i><span class="tooltiptext">My Text</span></div>', start: '2019-06-11', className: 'milestone', type:'point'},
    {id: 12, content: '<div class="tooltip"><i class="fas fa-circle"></i><span class="tooltiptext">My Text</span></div>', start: '2019-06-16', className: 'task', type:'point'},
    {id: 13, content: '<div class="tooltip"><i class="fas fa-circle"></i><span class="tooltiptext">My Text</span></div>', start: '2019-06-21', className: 'task', type:'point'},
    {id: 14, content: '<div class="container tooltip"><i class="fas fa-home"></i><span class="tooltiptext">My Text</span></div>', start: '2019-06-21', className: 'milestone', type:'point'}
  ]);

  var container = document.getElementById('visualization');
  var options = {

    editable: false,
    orientation: 'top',
    height: '180px',
    showCurrentTime: false,
    stack: false,
    zoomMin: 1000 * 60 * 60 * 24 * 31,
    /*zoomMin: 604800000,*/
    start: '2019-04-01',
    end: '2019-06-30',
    moveable: true,
    zoomable: true,
    showTooltips: false,
    min: '2019-01-01',
    max: '2019-12-31'

  };

  var timeline = new vis.Timeline(container);
  timeline.setOptions(options);
  timeline.setItems(items);

  /**
 * 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.7); };
document.getElementById('moveRight').onclick = function () { move(-0.7); };
//document.getElementById('fit').onclick       = function () { timeline.fit(); };

</script>
</body>
</html>

这是我的jsfiddle https://jsfiddle.net/smwelch/oqwvyaL9/2/

我已经尝试了所有可以想到的包括z-index在内的内容。奇怪的是，时间轴上前6个点的工具提示按预期方式工作，然后它们开始成为时间轴上更远的点

https://jsfiddle.net/smwelch/oqwvyaL9/2/

我需要工具提示位于时间轴上

1 个答案:

答案 0 :(得分：0)

这是因为您的html呈现错误。在：

<div class="vis-foreground">
   <div class="vis-group">
      <div class="vis-item vis-point task vis-readonly">...

前7个vis-div div从中间开始并到达最前面，然后呈现第二组vis-item div，使它们与第一组重叠。您要做的就是将第7个div之后的每个div集剪切并粘贴到vis-group的顶部。我在jsfiddle https://jsfiddle.net/sqz81oe9/

中添加了剪切和粘贴的内容
相关问题
最新问题