Làm cách nào để thay đổi màu nền, CSS đánh dấu và thêm văn bản di chuột lên điểm đánh dấu?

Question

Tôi đang cố tạo chế độ xem dòng thời gian bằng cách sử dụng visjs của trường hợp nâng cấp (Nâng cấp trước, Bản phát hành trước & Đăng nâng cấp) một cái gì đó tương tự như hình ảnh bên dưới. Cần một số gợi ý để tạo các vùng màu khác nhau như được mô tả trong hình ảnh, CSS để thay đổi điểm đánh dấu chính thành nguồn hình ảnh và cũng trên con trượt của thanh trượt (vùng hoặc điểm đánh dấu) nó sẽ hiển thị một số mô tả.

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

khiển

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

tôi cũng cung cấp một plunker link cho vấn đề này.

Cập nhật Ngoài ra tại sao người plunker của tôi không hiển thị thay đổi màu vùng?

Cập nhật plunker link với một số thay đổi CSS, nhưng làm thế nào để thêm tooltip trên đầu trang của khu vực nền và làm thế nào để thêm dấu tùy chỉnh như thể hiện trong hình ảnh với tooltips?

Cập nhật

Bây giờ tôi đã đạt được hầu hết các thứ bằng cách sử dụng cả hai AngularJS và jQuery cùng một lúc, nhưng cần sự giúp đỡ để chuyển đổi tất cả mọi thứ để AngularJS. Vẫn đang thêm thời gian tùy chỉnh đang chờ xử lý và nhấp vào sự kiện.

Updated Plunker link

Answer 1

Nhìn vào các tài liệu bạn có thể xem tài liệu cho nơi họ giải thích rõ ràng các lớp học với những gì bạn cần cập nhật để tạo kiểu tóc.

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

Ngoài ra họ có sự kiện cho onmoving và như vậy, do đó bạn sẽ có thể kéo và động xây dựng trong nhưng tôi không thể tìm thấy một ví dụ rõ ràng về nó trong tài liệu của họ.