0

I have a problem with the link titles. I tried to style the link title with css. My css is :

a[title]:hover:after {
  content: attr(title);
  padding: 2px 8px;
  position: absolute;
  left: 0;
  top: 100%;
  white-space: nowrap;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  border:1px solid #bce8f1;
  background-color:#d9edf7;
  color:#31708f;
  font-weight:700;
  box-shadow: 0 0 6px #bce8f1;
  z-index:99999999;
}

But when I hover over the link, I get this styled title but I get also the old one like on the photo.

enter image description here

Any ideas?

Thanks

Boky
  • 11,554
  • 28
  • 93
  • 163
  • I highly doubt you can do anything about this without using JavaScript to change the title attribute to something else and basing your CSS on that new attribute. – BoltClock Dec 25 '15 at 13:12
  • Because your pseudo-element and title are different elements. – cameronjonesweb Dec 25 '15 at 13:12
  • Any suggestions how to hide the old title? With javascript or with css? – Boky Dec 25 '15 at 13:13
  • Try this: http://stackoverflow.com/questions/15364063/is-it-possible-to-hide-the-title-from-a-link-with-css – cameronjonesweb Dec 25 '15 at 13:14
  • I tried something like `$(document).ready(function() { $('[title]').removeAttr('title'); });` . But now i do not see title at all. – Boky Dec 25 '15 at 13:20

2 Answers2

4

Instead of using the title attribute which has a default action/style, I'd create my own.

<a href="/someplace.html" data-title="The Title of Someplace">Someplace</a>

Then you would change the CSS to reflect the new attribute.

a[data-title]:hover:after {
  content: attr(data-title);
  ...
}
Donnie D'Amato
  • 3,832
  • 1
  • 15
  • 40
4

Use data-title instead of title:

HTML:

<a href="mailto:info@vermistedieren.be" data-title="Als u nog vragen heeft, stel ze gerust. Wij staan tot uw dienst!">

CSS:

a[data-title]:hover::after {
  content: attr(data-title);
  ...
}
Rounin
  • 27,134
  • 9
  • 83
  • 108