Drupal 7 I need to style the title attribute
It doesn't work because in test file you are using 'HTML5' doctype, and on other page (in Drupal) doctype is 'XHTML + RDFa' and you can't use data attribute.

Why don't you ignore data tags and use only CSS? There is an example:

a {
  color: #900;
  text-decoration: none;
}

a:hover {
  color: red;
  position: relative;
}

a[title]:hover:after {
  content: attr(title);
  padding: 4px 8px;
  color: #333;
  position: absolute;
  left: 0;
  top: 100%;
  white-space: nowrap;
  z-index: 9;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -moz-box-shadow: 0px 0px 4px #222;
  -webkit-box-shadow: 0px 0px 4px #222;
  box-shadow: 0px 0px 4px #222;
  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));
  background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
}


You can play around with this CSS and stylize your tooltip as you like.

Also, you can use CSS to stylize title tooltip form an anchor tag, but it won't work on img tag title.

This is how provided example looks like on your site (of course you can set 'width' for tooltip and it will look exactly like yours at test page):


I hope that this is helpful.