add title attribute from css

by

Well, although it’s not actually possible to change the title attribute, it is possible to show a tooltip completely from CSS.
You can check a working version out at http://jsfiddle.net/HzH3Z/5/.

What you can do is style the label:after selector and give it display:none, and set its content from CSS. You can then change the display attribute to display:block on label:hover:after, and it will show.
Like this:

label::after {
  content: "my tooltip";
  padding: 2px;
  display: none;
  position: relative;
  top: -20px;
  right: -30px;
  width: 150px;
  text-align: center;
  background-color: #fef4c5;
  border: 1px solid #d4b943;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  -ms-border-radius: 2px;
  border-radius: 2px;
}
label:hover::after {
  display: block;
}

More Related Contents:

  1. Can't remove text decoration
  2. How to make double border on left only with thick outside and thin inside [duplicate]
  3. Why my HTML input field is ‘readonly’ by default [closed]
  4. Bootstrap height
  5. Centering in CSS Grid
  6. How to style the parent element when hovering a child element?
  7. Styling text input caret
  8. How to make this arrow in CSS only?
  9. Make Iframe to fit 100% of container’s remaining height
  10. Bootstrap 3 two columns full height
  11. Why does IE9 switch to compatibility mode on my website?
  12. Maintain image aspect ratio when changing height
  13. How to change the length/position of text-decoration:underline?
  14. IE6 + IE7 CSS problem with overflow: hidden; – position: relative; combo
  15. White space showing up on right side of page when background image should extend full length of page [closed]
  16. How to center the contents of an HTML table?
  17. Make a nav bar stick
  18. How to hide Table Row Overflow?
  19. Bootstrap print CSS removes background color
  20. Internet Explorer 11 word wrap is not working
  21. Width 100% with white borders around it. WHy?
  22. Why would the height increase with a smaller font size?
  23. Pressing spacebar scrolls page down?
  24. Why is box-sizing acting different on table vs div?
  25. Is this empty space actually margin-right which is not recognized by dev tools?
  26. Understanding CSS2.1 specification regarding height on inline-level boxes
  27. How do I give a CSS class priority over an id?
  28. Padding the top and the bottom of inline element
  29. align images side by side in html
  30. CSS class starting with number is not getting applied

Leave a Comment