title: Change title style jquery - css
body: <p>Im trying to change title style for all links however i just found how to do it for <code>&lt;a&gt;</code> links not for forms , <code>&lt;td&gt;</code> and images titles neighter. Can any one help me to get it using jquery .. this is the code that i have:</p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;Anchor Title Demo&lt;/title&gt;
          &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
          &lt;script src="http://code.jquery.com/jquery-1.6.1.min.js"&gt;&lt;/script&gt;
          &lt;script&gt;
  
              $(document).ready(function() {
  
                  $('body').append('&lt;div id="anchorTitle" class="anchorTitle"&gt;&lt;/div&gt;');
  
                  $('a[title!=""]').each(function() {
  
                      var a = $(this);
  
                      a.hover(
                          function() {
                              showAnchorTitle(a, a.data('title')); 
                          }, 
                          function() { 
                              hideAnchorTitle();
                          }
                      )
                      .data('title', a.attr('title'))
                      .removeAttr('title');
  
                  });
  
  
  
              });
  
              function showAnchorTitle(element, text) {
  
                  var offset = element.offset();
  
                  $('#anchorTitle')
                  .css({ 
                      'top'  : (offset.top + element.outerHeight() + 4) + 'px',
                      'left' : offset.left + 'px'
                  })
                  .html(text)
                  .show();
  
              }
  
              function hideAnchorTitle() {
                  $('#anchorTitle').hide();
              }
  
          &lt;/script&gt;
  
          &lt;style&gt;
              body {
                  background-color: white;
                  font-family: Helvetica, Arial, sans-serif;
                  font-size: 14px;
              }
              /* title style
               */
              .anchorTitle {
                  /* border radius */
                  -moz-border-radius: 8px;
                  -webkit-border-radius: 8px;
                  border-radius: 8px;
                  /* box shadow */
                  -moz-box-shadow: 2px 2px 3px #e6e6e6;
                  -webkit-box-shadow: 2px 2px 3px #e6e6e6;
                  box-shadow: 2px 2px 3px #e6e6e6;
                  /* other settings */
                  background-color: #fff;
                  border: solid 3px #d6d6d6;
                  color: #333;
                  display: none;
                  font-family: Helvetica, Arial, sans-serif;
                  font-size: 11px;
                  line-height: 1.3;
                  max-width: 200px;
                  padding: 5px 7px;
                  position: absolute;
              }
              * html #anchorTitle {
                  /* IE6 does not support max-width, so set a specific width instead */
                  width: 200px;
              }
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
  
  
          &lt;p&gt;
              &lt;a href="#" title="The title will appear in an box when the mouse is over the link"&gt;Hover over me&lt;/a&gt;
          &lt;/p&gt;
          &lt;div&gt;
              &lt;input type="text"  title="The title will appear in an box when the mouse is over the link" name="styleSwitcher" placeholder="Hover over me" /&gt;&lt;p&gt;&lt;/p&gt;&lt;p&gt;&lt;/p&gt;
               &lt;dt title="The title will appear in an box when the mouse is over the link"&gt;Hover over me &lt;/dt&gt;
          &lt;/div&gt;
  
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>DEMO:</strong> <a href="http://jsfiddle.net/NVENA/2/" rel="nofollow">http://jsfiddle.net/NVENA/2/</a></p>