如何更改背景颜色，标记CSS，以及在标记上添加悬停文字？

问题描述

我正在尝试使用下图的升级方案（升级前，发布前和升级后）的创建时间线视图。 需要一些指针来创建图像中所示的不同区域颜色，需要CSS来将主标记更改为图像源，并且还需要在滑块（区域或标记）的悬停上显示一些说明。

的CSS

.vis-item.vis-background.preupgrade {
  background-color: rgba(0, 153, 255, 0.2);
}

.vis-item.vis-background.prerelease {
  background-color: rgba(102, 204, 255, 0.2);
}

.vis-item.vis-background.postupgrade {
  background-color: rgba(204, 204, 255, 0.2);
}

控制者

$scope.visData = new vis.DataSet([
  {start: '2015-07-26', end: '2015-08-25', type: 'background', title: 'Pre Upgrade', className: 'preupgrade'},
  {start: '2015-08-26', end: '2015-09-30', type: 'background', title: 'Pre Release', className: 'prerelease'},
  {start: '2015-10-01', end: '2015-10-31', type: 'background', title: 'Post Upgrade', className: 'postupgrade'}
]);
  $scope.visOption = {
    editable: false,
    autoResize: true,
    moveable: true,
    margin: {
        item: 10,
        axis: 20
    }
};

Visjs时间轴HTML

<vis-timeline data="visData" options="visOption" events="visEvent"></vis-timeline> 

我也为这个问题提供了一个 。

更新还为什么我的松节器不显示区域颜色变化？

更新了具有一些CSS更改的 ，但是如何在背景区域的顶部添加工具提示，以及如何添加带有工具提示的图像中所示的自定义标记？

更新资料

现在，通过同时使用AngularJS和jQuery已经实现了大多数事情，但是需要帮助将所有内容转换为AngularJS。 仍在添加自定义时间正在等待和点击事件。