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

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.

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.


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

1 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): Example-Screenshot

I hope that this is helpful.

  • I am trying to recreate an affect the client current website has www.uptownchurchofchrist.com. When the images are moused over, there is a translucent screen that displays text over the image. This is what I am trying to recreate in drupal. The existing site uses methods that I can't use in drupal. Commented Aug 10, 2014 at 20:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.