Tooltip not working in C# (razor page)

Question

I need a simple tooltip for my project and inside of the tool tip i want to display the "Timestamp" (parameter). When I hover over to the circle (which is defined in my code sample), I need to have the Timestamp displayed. I have tried the following, but that seems to be not working. Here's my code. `

<style>
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

</style>

<div ng-repeat="p in page.watchhistory track by $index">
  <marker class="tooltip " ng-repeat="a in p track by $index" position="{{a.Location.position}}" icon="{{p.iconData}}" title="{{a.Timestamp}}">
  </marker>
</div>

<script>
  app.controller('mapCtrl', ['$scope', '$http', 'serviceBasePath', 'NgMap', 'Hub', 'ColorService', function($scope, $http, serviceBasePath, NgMap, Hub, ColorService) {
  var page = this;
  page.map = map;

});

  page.watchhistory = [];
  var previousDate = ''; page.watchdevicehistory = function(device) {
  if (device.DeviceId) {
    var currentDate = device.UpdatedTimestamp ? device.UpdatedTimestamp : device.LastUpdateTimestamp;
    page.p.BtnHistory = false;
    if (device.hasMore) {
      $http.get(serviceBasePath + '/api/Map/DeviceLocationsInfo', {
        params: {
          DeviceId: device.DeviceId,
          CurrentDate: currentDate
        }
      }).then(function(response) {
        if (response.data) {
          device.UpdatedTimestamp = response.data.NextLocationTimestamp;
          device.hasMore = response.data.HasMore;
          page.watchhistory[device.index] = response.data.DeviceLocations.concat(page.watchhistory[device.index]);
          page.watchindex = device.index;
          page.watchhistory[device.index].iconData = {
            path: 'CIRCLE',
            scale: 3,
            strokeColor: ColorService.Color[device.index]
          };
          console.log(page.watchhistory);
        }
      }, function(error) {})
    } else {
      page.p.BtnHistory = true;
    }
  }
  }

  }]);
</Script>

` Here is how my output window looks like When I hover over to the blue dots (refer the image) I need to display the "Timestamp". Help is much appreciated! Thanks.

Answer 1

Try setting the Title attribute of your Marker element:

<div ng-repeat="p in page.watchhistory track by $index">
  <marker class="tooltip" 
       ng-repeat="a in p track by $index" 
       position="{{a.Location.position}}" icon="{{p.iconData}}"
       title="'{{a.Timestamp}}'">
  </marker>
</div>