title: how to pass argument to jquery for bootstrap tooltip text from an element in the html body
body: <p>I have the following simple markup which displays a colored bootstrap tooltip when hovering over the button in the body.  The tooltip text is currently hardcoded into the jquery function.  I want to pass the tooltip text to the jquery function from the button markup.  How to do this?  (this will eventually be asp.net markup)</p>
  
  <pre><code>&lt;html&gt;
  &lt;title&gt;toolTips&lt;/title&gt;
  &lt;head&gt;
  
    &lt;script type="text/javascript" src="jqueryScripts\jquery-2.1.0.js"&gt;&lt;/script&gt;     
    &lt;script type="text/javascript" src="jqueryScripts\bootstrap.min.js"&gt;&lt;/script&gt;     
    &lt;link rel="stylesheet" type="text/css" href="jqueryScripts\bootstrap-combined.min.css"&gt;     
  
    &lt;style type="text/css"&gt;
      .red-tooltip + .tooltip &gt; .tooltip-inner {background-color: #f00;}
      .red-tooltip + .tooltip &gt; .tooltip-arrow { border-bottom-color:#f00; }
    &lt;/style&gt;
  
  &lt;script type='text/javascript'&gt;
  $(
     function(){
        $('#userNameField').tooltip({    
            'placement': 'bottom',
            'title': "...this is a test tooltip..."
         });
  }); 
  
  &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
      &lt;input type="submit" class="red-tooltip" id="userNameField" value="button1"&gt;  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>