JSFiddle - React, Tailwind, and code Playground

by SchmalzyB

HTML

<span class="tooltip-notworking" data-title="City-Name \A Time-Diff \A Local Time: 11:23 CDT \A Date: 13 June 2016">This one doesn't work...</span>
<br>
<span class="tooltip-working">This one works correctly...</span>

CSS

body {
  padding: 100px;
}

.tooltip-working,
.tooltip-notworking {
  display: inline;
  position: relative;
}

.tooltip-notworking:hover:after{
  content: attr(data-title);
  white-space: pre; 
  background: #333;
  border-radius: 2px;
  bottom: 26px;
  color: #fff;
  left: 20%;
  padding: 5px 15px;
  position: absolute;
  z-index: 98;
  width: 220px;
}

.tooltip-working:hover:after {
  content: "City-Name \A Time-Diff \A Local Time: 11:23 CDT \A Date: 13 June 2016";
  white-space: pre;    
  background: #333;
  border-radius: 2px;
  bottom: 26px;
  color: #fff;
  left: 20%;
  padding: 5px 15px;
  position: absolute;
  z-index: 98;
  width: 220px;
 
}