How to change the style of the title attribute inside an anchor tag

Question

Example    lt a href  example com  title  My site  gt  Link  lt  a gt    How do I change the presentation of the  title  attribute in the browser   By default  it just has yellow background and small font  I would like to make it bigger and change the background color   Is there a CSS way to style the title attribute

User · Answer

You can t style an actual title attribute  How the text in the title attribute is displayed is defined by the browser and varies from browser to browser  It s not possible for a webpage to apply any style to the tooltip that the browser displays based on the title attribute   However  you can create something very similar using other attributes   You can make a pseudo-tooltip with CSS and a custom attribute  e g  data-title   For this  I d use a data-title attribute  data-  attributes are a method to store custom data in DOM elements HTML  There are multiple ways of accessing them  Importantly  they can be selected by CSS   Given that you can use CSS to select elements with data-title attributes  you can then use CSS to create  after  or  before  content that contains the value of the attribute using attr        Styled tooltip Examples  Bigger and with a different background color  per question s request       x000D   x000D   data-title  hover after   x000D      opacity  1  x000D      transition  all 0 1s ease 0 5s  x000D      visibility  visible  x000D    x000D   data-title  after   x000D      content  attr data-title   x000D      background-color   00FF00  x000D      color   111  x000D      font-size  150   x000D      position  absolute  x000D      padding  1px 5px 2px 5px  x000D      bottom  -1 6em  x000D      left  100   x000D      white-space  nowrap  x000D      box-shadow  1px 1px 3px  222222  x000D      opacity  0  x000D      border  1px solid  111111  x000D      z-index  99999  x000D      visibility  hidden  x000D    x000D   data-title    x000D      position  relative  x000D    x000D   lt a href  example com  data-title  My site  gt  Link  lt  a gt  with styled tooltip  bigger and with a different background color  as requested in the question  lt br  gt  x000D   lt a href  example com  title  My site  gt  Link  lt  a gt  with normal tooltip x000D   x000D   x000D    More elaborate styling  adapted from this blog post     x000D   x000D   data-title  hover after   x000D      opacity  1  x000D      transition  all 0 1s ease 0 5s  x000D      visibility  visible  x000D    x000D   data-title  after   x000D      content  attr data-title   x000D      position  absolute  x000D      bottom  -1 6em  x000D      left  100   x000D      padding  4px 4px 4px 8px  x000D      color   222  x000D      white-space  nowrap   x000D      -moz-border-radius  5px   x000D      -webkit-border-radius  5px    x000D      border-radius  5px    x000D      -moz-box-shadow  0px 0px 4px  222    x000D      -webkit-box-shadow  0px 0px 4px  222    x000D      box-shadow  0px 0px 4px  222    x000D      background-image  -moz-linear-gradient top   f8f8f8   cccccc     x000D      background-image  -webkit-gradient linear left top left bottom color-stop 0   f8f8f8  color-stop 1   cccccc    x000D      background-image  -webkit-linear-gradient top   f8f8f8   cccccc     x000D      background-image  -moz-linear-gradient top   f8f8f8   cccccc     x000D      background-image  -ms-linear-gradient top   f8f8f8   cccccc     x000D      background-image  -o-linear-gradient top   f8f8f8   cccccc   x000D      opacity  0  x000D      z-index  99999  x000D      visibility  hidden  x000D    x000D   data-title    x000D      position  relative  x000D    x000D   lt a href  example com  data-title  My site  gt  Link  lt  a gt  with styled tooltip lt br  gt  x000D   lt a href  example com  title  My site  gt  Link  lt  a gt  with normal tooltip x000D   x000D   x000D    Known issues  Unlike a real title tooltip  the tooltip produced by the above CSS is not  necessarily  guaranteed to be visible on the page  i e  it might be outside the visible area   On the other hand  it is guaranteed to be within the current window  which is not the case for an actual tooltip   In addition  the pseudo-tooltip is positioned relative to the element that has the pseudo-tooltip rather than relative to where the mouse is on that element  You may want to fine-tune where the pseudo-tooltip is displayed  Having it appear in a known location relative to the element can be a benefit or a drawback  depending on the situation   You can t use  before or  after on elements which are not containers  There s a good explanation in this answer to  Can I use a  before or  after pseudo-element on an input field     Effectively  this means that you can t use this method directly on elements like  lt input type  text   gt    lt textarea  gt    lt img gt   etc  The easy solution is to wrap the element that s not a container in a  lt span gt  or  lt div gt  and have the pseudo-tooltip on the container   Examples of using a pseudo-tooltip on a  lt span gt  wrapping a non-container element    x000D   x000D   data-title  hover after   x000D      opacity  1  x000D      transition  all 0 1s ease 0 5s  x000D      visibility  visible  x000D    x000D   data-title  after   x000D      content  attr data-title   x000D      background-color   00FF00  x000D      color   111  x000D      font-size  150   x000D      position  absolute  x000D      padding  1px 5px 2px 5px  x000D      bottom  -1 6em  x000D      left  100   x000D      white-space  nowrap  x000D      box-shadow  1px 1px 3px  222222  x000D      opacity  0  x000D      border  1px solid  111111  x000D      z-index  99999  x000D      visibility  hidden  x000D    x000D   data-title    x000D      position  relative  x000D    x000D   x000D   pseudo-tooltip-wrapper   x000D        This causes the wrapping element to be the same size as what it contains    x000D      display  inline-block  x000D    x000D  Text input with a pseudo-tooltip  lt br  gt  x000D   lt span class  pseudo-tooltip-wrapper  data-title  input type  amp quot text amp quot   gt  lt input type  text  gt  lt  span gt  lt br  gt  lt br  gt  lt br  gt  x000D  Textarea with a pseudo-tooltip  lt br  gt  x000D   lt span class  pseudo-tooltip-wrapper  data-title  this is a textarea  gt  lt textarea data-title  this is a textarea  gt  lt  textarea gt  lt  span gt  lt br  gt  x000D   x000D   x000D      From the code on the blog post linked above  which I first saw in an answer here that plagiarized it   it appeared obvious to me to use a data-  attribute instead of the title attribute  Doing so was also suggested in a comment by snostorm on that  now deleted  answer

User · Answer

Native tooltip cannot be styled   That being said  you can use some library that would show styles floating layers when element is being hovered  instead of the native tooltips  and suppress them  requiring little or no code modifications

User · Answer

I have found the answer here  http   www webdesignerdepot com 2012 11 how-to-create-a-simple-css3-tooltip  my own code goes like this  I have changed the attribute name  if you maintain the title name for the attribute you end up having two popups for the same text  another change is that my text on hovering displays underneath the exposed text   x000D   x000D   tags     display  inline    position  relative      tags hover after     background   333    background  rgba 0  0  0   8     border-radius  5px    bottom  -34px    color   fff    content  attr gloss     left  20     padding  5px 15px    position  absolute    z-index  98    width  350px      tags hover before     border  solid    border-color   333 transparent    border-width  0 6px 6px 6px    bottom  -4px    content        left  50     position  absolute    z-index  99    x000D   lt a class  tags  gloss  Text shown on hovering  gt Exposed text lt  a gt  x000D   x000D   x000D

User · Answer

You cannot style the default browser tooltip  But you can use javascript to create your own custom HTML tooltips

User · Answer

a title  My site         color  red      This also works with any attribute you want to add for instance   HTML   lt div class  my class  anything  whatever  gt My Stuff lt  div gt    CSS   my class anything  whatever         color  red      See it work at  http   jsfiddle net vpYWE 1

User · Answer

A jsfiddle for custom tooltip pattern is Here  It is based on CSS Positioning and pseduo class selectors  Check MDN docs for cross-browser support of pseudo classes       lt  -- HTML -- gt   lt p gt       lt a href  http   www google com   class  tooltip  gt      I am a           lt span gt   This website rocks   lt  span gt  lt  a gt  amp nbsp  a developer   lt  p gt         CSS   a tooltip       position  relative     a tooltip span       display  none         a tooltip hover span  a tooltip focus span       display block      position absolute      top 1em      left 1 5em      padding  0 2em 0 6em      border 1px solid  996633      background-color  FFFF66      color  000

User · Answer

CSS can t change the tooltip appearance  It is browser OS-dependent  If you want something different you ll have to use Javascript to generate markup when you hover over the element instead of the default tooltip

User · Answer

I thought i d post my 20 lines JavaScript solution here  It is not perfect  but may be useful for some depending on what you need from your tooltips   When to use it   Automatically styles the tooltip for all HTML elements with a TITLE attribute defined  this includes elements dynamically added to the document in the future  No Javascript HTML changes or hacks required for every tooltip  just the TITLE attribute  semantically clear  Very light  adds about 300 bytes gzipped and minified  You want only a very basic styleable tooltip   When NOT to use   Requires jQuery  so do not use if you don t use jQuery Bad support for nested elements that both have tooltips You need more than one tooltip on the screen at the same time You need the tooltip to disappear after some time   The code     Use a closure to keep vars out of global scope  function          var ID    tooltip   CLS ON    tooltip ON   FOLLOW   true      DATA     tooltip   OFFSET X   20  OFFSET Y   10      showAt   function  e            var ntop   e pageY   OFFSET Y  nleft   e pageX   OFFSET X                  ID  html   e target  data DATA   css               position   absolute   top  ntop  left  nleft            show                 document  on  mouseenter      title    function  e              this  data DATA    this  attr  title               this  removeAttr  title   addClass CLS ON               lt div id      ID        gt    appendTo  body            showAt e                 document  on  mouseleave         CLS ON  function  e              this  attr  title     this  data DATA   removeClass CLS ON                   ID  remove                if  FOLLOW      document  on  mousemove         CLS ON  showAt             Paste it anywhere  it should work even when you run this code before the DOM is ready  it just won t show your tooltips until DOM is ready    Customize  You can change the var declarations on the second line to customize it a bit   var ID    tooltip      The ID of the styleable tooltip var CLS ON    tooltip ON      Does not matter  make it somewhat unique var FOLLOW   true     TRUE to enable mouse following  FALSE to have static tooltips var DATA     tooltip      Does not matter  make it somewhat unique var OFFSET X   20  OFFSET Y   10     Tooltip s distance to the cursor   Style  You can now style your tooltips using the following CSS    tooltip       background   fff      border  1px solid red      padding  3px 10px

User · Answer

It seems that there is in fact a pure CSS solution  requiring only the css attr expression  generated content and attribute selectors  which suggests that it works as far back as IE8   https   jsfiddle net z42r2vv0 2   x000D   x000D  a     position  relative    display  inline-block    margin-top  20px     a title  hover  after     content  attr title     position  absolute    top  -100     left  0    x000D   lt a href  http   www google com   title  Hello world   gt    Hover over me  lt  a gt  x000D   x000D   x000D   update w  input from  ViROscar  please note that it s not necessary to use any specific attribute  although I ve used the  quot title quot  attribute in the example above  actually my recommendation would be to use the  quot alt quot  attribute  as there is some chance that the content will be accessible to users unable to benefit from CSS  update again I m not changing the code because the  quot title quot  attribute has basically come to mean the  quot tooltip quot  attribute  and it s probably not a good idea to hide important text inside a field only accessible on hover  but if you re interested in making this text accessible the  quot aria-label quot  attribute seems like the best place for it  https   developer mozilla org en-US docs Web Accessibility ARIA ARIA Techniques Using the aria-label attribute

User · Answer

Here is an example of how to do it    x000D   x000D  a tip   x000D      border-bottom  1px dashed  x000D      text-decoration  none x000D    x000D  a tip hover   x000D      cursor  help  x000D      position  relative x000D    x000D  a tip span   x000D      display  none x000D    x000D  a tip hover span   x000D      border   c0c0c0 1px dotted  x000D      padding  5px 20px 5px 5px  x000D      display  block  x000D      z-index  100  x000D      background  url    images status-info png   f0f0f0 no-repeat 100  5   x000D      left  0px  x000D      margin  10px  x000D      width  250px  x000D      position  absolute  x000D      top  10px  x000D      text-decoration  none x000D    x000D   lt a href     class  tip  gt Link lt span gt This is the CSS tooltip showing up when you mouse over the link lt  span gt  lt  a gt  x000D   x000D   x000D

[html] How to change the style of the title attribute inside an anchor tag?

You can't style an actual `title` attribute

You can make a pseudo-tooltip with CSS and a custom attribute (e.g. `data-title`)

Styled tooltip Examples

Known issues

You can't use `:before` or `:after` on elements which are not containers

Examples related to html

Examples related to css