How to change background colors, marker CSS, and add hover text on marker?

Question

I am trying to create a timeline view using visjs of a upgrade scenario (Pre Upgrade, Pre Release &Post Upgrade) something similar to the image below. Need some pointers to create different region colors as depicted in the image, CSS to change the main marker to an image source and also on hover of the slider (region or markers) it should show some description.

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);
}

Controller

$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 timeline HTML

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

I am also providing a plunker link for this problem.

Update Also why my plunker does not show region color changes?

Updated plunker link with some CSS changes, but how to add tooltip on top of background areas and how to add custom markers as shown in image with tooltips?

Update

Now I have achieved most of the things by using both AngularJS and jQuery simultaneously, but need help to convert everything to AngularJS. Still adding a custom time is pending and click event.

Updated Plunker link

Favoritism

I updated your plnkr to fix the way the data was being fed into Timeline based on what I saw in their docs plnkr.co/edit/wcmgBYIxwA1BrLxJ1pzb?p=preview not sure about other details of adding a draggable marker as I haven't used this library, IMO if you have the specifications and they aren't extremely broad you might be better off just building this up instead of working around the library if it doesn't offer all the features you need. – Chickadee

@shaunhusain: thanks let me try it. – Favoritism

Answer 1

Looking at the documentation you can see docs for where they spell out the classes to what you need to update for styling.

http://visjs.org/docs/timeline/#Editing_Items

Also they have events for onmoving and such so you should be able to drag and animate built in but I couldn't find a clear example of it in their docs.

Keats