3

I use CSS to style the abbr tool tip:

  abbr {
    position: relative;
  }
  abbr:hover::after {
    position: absolute;    
    width: 300px;
    bottom: 100%;
    left: 100%;
    display: block;
    padding: 1em;
    background: #ffffe1;
    content: attr(title);
  }

<abbr title="As Soon As Possible">ASAP</abbr>

However, the original old-fashioned abbr tooltip is displayed too, in addition to the styled new one. How can I suppress it?

This cannot be simply solved with the answer to a similar question. The attribute name title must be kept and replaced at run-time with a javascript.

Community
  • 1
  • 1
user1580348
  • 5,721
  • 4
  • 43
  • 105
  • Related: http://stackoverflow.com/questions/19746767/hide-title-from-tooltip – Josh Crozier Aug 30 '14 at 16:47
  • 1
    @Jukka K. Korpela There is no identical question. If you think that this same question has been asked before then show me where. This question is different because it has to use the title attribute in the abbr tag. – user1580348 Aug 30 '14 at 20:42
  • @user1580348, the duplicate is linked to at the start; it’s http://stackoverflow.com/questions/19746767/hide-title-from-tooltip (and please don’t put unrelated questions in the same question; rounded corners are an unrelated issue, well covered in many SO questions and answers). – Jukka K. Korpela Aug 30 '14 at 21:05
  • 1
    @Jukka K. Korpela Apparently you did not read my comment. This question is different because a javascript has to be added to add a custom attribute (see solution). I am editing the question to reflect this. And BTW - somebody deleted my edits of my question to reflect the above - was that you? – user1580348 Aug 30 '14 at 21:32
  • No, it hasn't been answered like the panel on the top says. This is a different question. Read all the comments and the accepted solution! – user1580348 Aug 31 '14 at 03:19
  • @user1580348, you have accepted an answer that is the same (apart from wording and similar details) as the accepted answer to the older question. If you have *another* question, which has a special requirement that `title` attribute must appear in markup and should be replaced by a custom attribute with JavaScript, then this would be a new question entirely and should surely be tagged with “javascript”. And you should try to solve the problem on your own first and post your best effort; it isn’t a particularly difficult problem. – Jukka K. Korpela Aug 31 '14 at 11:00

1 Answers1

3

Since you can't prevent/hide the title attribute from showing on hover, just use a different attribute. A data-* attribute such as data-title would work. Just change the markup and the content value.

Example Here

<abbr data-title="As Soon As Possible">ASAP</abbr>

abbr:hover::after {
    content: attr(data-title);
    /* .. */
}

As for the rounded corners, just use the border-radius property.

Josh Crozier
  • 233,099
  • 56
  • 391
  • 304
  • Thanks for this nice solution! However, I have to use an existing source code with the title attribute. So how can I automatically replace the abbr title attribute with the data-title attribute at browser run-time? – user1580348 Aug 30 '14 at 17:21
  • @user1580348 Here is a [jQuery option](http://jsfiddle.net/3j2xmzpt/).. and a plain [JS option](http://jsfiddle.net/zv2hj9xu/). – Josh Crozier Aug 30 '14 at 17:38
  • Thank you very much, you are a real genius! Can I somehow give you 5 points? – user1580348 Aug 30 '14 at 17:49
  • I tried to use your plain JS example (to avoid downloading the whole jQuery lib) in the HEAD section, but it does not work, even when preceded with the onload event-listener: `document.getElementsByTagName('body').onload = function() {replaceTitleAttributes()};` – user1580348 Aug 30 '14 at 18:10
  • @user1580348 See [this example](http://jsfiddle.net/m63jthbn/). You could use `document.addEventListener('DOMContentLoaded', function(){ .. });`... alternatively, you could also use `window.onload = replaceTitleAttributes;`. See this [alternative example](http://jsfiddle.net/gu48jdo0/). – Josh Crozier Aug 30 '14 at 18:13
  • 1
    Thank you - now it works!! I want to propose you for the StackOverflow Nobel Prize! – user1580348 Aug 30 '14 at 18:27
  • One last question: The tooltip box is always shown UNDER the abbr. How can I make it display on the same vertical level or above? – user1580348 Aug 30 '14 at 18:56
  • Found the answer: `top: -100%;` – user1580348 Aug 30 '14 at 19:10