Drupal 7 I need to style the title attribute

Question

Here is link to what I am trying to accomplish in drupal.

 http://70.169.1.219/hijo/css3_test.html

In order to get the mouse over to work the title tags where changed to data tags and styled by the css.

In drupal, it deletes the data tags that I put in block to render the affect.

 http://70.184.177.183/Uptown/home

If I style the title block, I get the double affect. I don't think there is a way to suppress the browser rendering of the title tag.

Looking for any suggestion.

UPDATE:

What I ended up getting to work was that in the CKEditor, I remember you use to be able to make an editor and call it PHP which would allow anyone to introduce PHP code into the block. So I created a new CKEditor profile and to my suprise it did not really offer any config. So I gave it the minimum config that it requiried and named it PHP. I went back in and switched to that profile an opened the block and was able to type in any HTML code I so choose and now my project is back on schedule. ! screenshot of the image overlay

Answer 1

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.