Timeticker css not working in visjs timeline

Question

I am using background areas example. I have couple of problems

1. In doc under addCustomTime method description it is mentioned that id is added as classname but any changes to this class is not taking effect.
2. How to center align content text in a background area with background area having a border?
3. Also how can I change css for setCurrentTime(time) marker?

My css

.vis-current-time {
  color: black !important;
  border: 2px;
  cursor: hand;
}

.milestone-1 {
  color: green !important;
  border: 2px;
  cursor: hand;
}

.vis-item.vis-background.positive {
  background-color: rgba(0, 0, 200, 0.2);
  cursor: hand;
}

.vis-item.vis-background.negative {
  background-color: rgba(255, 0, 0, 0.2);
  cursor: hand;
}

.vis-item-overflow.vis-item-content {
  left: auto !important;
  text-align: center !important;
  color: #ff0000 !important;
}

Here is plunker link of my problem.

Update

I am able to center align content text to center. I have also updated my plunker but borders are not taking effect

#visualization .vis-item.vis-background.positive .vis-item-content {
  width: 100%;
  text-align: center !important;
  border: 2px;
}
#visualization .vis-item.vis-background.negative .vis-item-content {
  width: 100%;
  text-align: center !important;
}

Answer 1

Here is the solution for you.

1) but any changes to this class is not taking effect:

You have used the wrong values for that class, so that its not reflected. To change the color you need to use the "background-color" and so on.. see the below CSS code.

.milestone-1 {
  background-color: green;
  width: 5px;
  /* border: 2px solid red; */
}

2) How to center align content text

To center align the text apply the CSS for the ".vis-item-overflow" class. No need to add any additional styles.

.vis-item-overflow {
  text-align: center;
}

3) Also how can I change css for setCurrentTime(time) marker

To apply the styles for current time marker you can use the ".vis-current-time" class like below:

.vis-current-time{
  background-color: black;
  width: 3px;
}

Here is the updated Demo: http://plnkr.co/edit/JVzCoYgltiy6DTL5SOAL?p=preview

Hope this might helps you...

Answer 2

To apply the tooltip for the whole box you need to add the below CSS style:

.vis-background .vis-item-content {
    z-index: 11111;
    height: 100%;
    width: 100%;
}

Check the Demo: http://plnkr.co/edit/JVzCoYgltiy6DTL5SOAL?p=preview

Answer 3

Answer for the previous comment:

As per vis, we can't update the tooltip dynamically. They initially updated the title at once based on the user input, so we can't update dynamically.

As a workaround we can dynamically update the tooltip from the element. As per the previous update we already used the tooltipster plugin for tooltip. By using this plugin's open event we can update the title dynamically.

 $('.tooltip .vis-item-content').tooltipster({
    functionBefore: function(origin, continueTooltip) {
      var currentTitle = origin.data("tooltipsterInitialTitle");
      origin.tooltipster("content", currentTitle + " --- Time :: " + new Date().toLocaleTimeString());
      continueTooltip();
    }
 });

Demo: http://plnkr.co/edit/JVzCoYgltiy6DTL5SOAL?p=preview

Update:

As per your comment you need to update the time for each second. So you can update the time on particular interval until the tooltip gets visible.

  var timer;
  $('.tooltip .vis-item-content').tooltipster({
    position: 'bottom',
    functionBefore: function(origin, continueTooltip) {
      continueTooltip();
      updateTooltip(origin);
      timer = setInterval(function(){ updateTooltip(origin); }, 1000);
    },
    functionAfter: function() {
      clearInterval(timer);
    }
  });

  function updateTooltip(origin) {
    var newTooltip = getTooltipContent(origin);
    $(origin.tooltipster('elementTooltip')).children(".tooltipster-content").html(newTooltip);
  }
  function getTooltipContent(origin) {
    var currentTitle = origin.data("tooltipsterInitialTitle");
    return currentTitle + " --- Time :: " + new Date().toLocaleTimeString();
  }

Updated Demo: http://plnkr.co/edit/JVzCoYgltiy6DTL5SOAL?p=preview

I think this may helps you ...