4

I am trying to make a simple tooltip kind of input placeholder using css. But today things won't work out as I expected.


    #formulier input:focus::-webkit-input-placeholder:after {
      content: attr(tip) "test"; /**/
      position:absolute;
      right:0;
      display:inline-block;
      color:red;
    }

The content output for "test" works fine, but I can't get the attr(tip).. Please check out the small demo I've created here (CHROME AND SAFARI ONLY DUE WEBKIT)

http://jsbin.com/ApIvawO/5/edit

Thanks in advance for helping me out :D

Sander
  • 95
  • 2
  • 6
  • 2
    Are you sure `content:"foo";` works? `content` shouldn't work with `input` elements at all. – BoltClock Feb 03 '14 at 03:20
  • Never mind, I see that you're using it with `::-webkit-input-placeholder:after`. It looks very much like you're facing the same issue here: http://stackoverflow.com/questions/18162649/css-content-attr-on-html5-progress-doesnt-work although that's for a different pseudo-element. Not sure if it counts as a duplicate, otherwise I can reproduce my answer here. – BoltClock Feb 03 '14 at 03:22
  • Sorry forgot to mention that the demo was made for chrome and safari browsers only. Due the -webkit thing there... – Sander Feb 03 '14 at 03:22
  • 1
    Well, you should paste the entire CSS rule here so it's clear that you're using a WebKit feature with the `content` property. – BoltClock Feb 03 '14 at 03:35
  • I think the issue is scope. I think at the time the css is firing, it isn't firing on the input, it is firing for the placeholder which doesn't have any attributes associated to it. – Spdermn02 Feb 03 '14 at 03:47
  • @Spdermn02 I had a similar thought but even using the input element directly fails to produce the desired result. – Deryck Feb 03 '14 at 04:05
  • @Deryck: If you mean applying `content` to the `input` element directly, of course it won't work - `input` elements don't have any notion of content. – BoltClock Feb 03 '14 at 10:32
  • @Spdermn02: That's actually exactly the theory I have because that's what is implied if you follow the standards. See my answer to the linked question. But of course that theory falls flat when talking about features that are non-standard to begin with. – BoltClock Feb 03 '14 at 10:34
  • @BoltClock: yes, that is true. – Spdermn02 Feb 03 '14 at 19:04

1 Answers1

0

You're going to have to wrap up those input fields with a span. Content pulled in CSS is pulled AFTER the content of the selector, in this case - input - does not hold content, and therefor using content:''; on an input is invalid. Either use a label or put a span around your input field

Grant Briston
  • 56
  • 2