JSFiddle - React, Tailwind, and code Playground

by Leonardo Trimarchi

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-tooltip.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-popover.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<div class="container">
    <div class="row" style="padding-top: 240px;"> <a href="#" class="btn btn-large btn-primary" rel="popover" data-content='
<form id="mainForm" name="mainForm"  action="">
    <p>
        <label>Step 1: Create  UserName</label>
       Enter a User Name that the Agent Assistant will use to Log Into Adds
    </p>
    <p>
        <label>Step 2: Create  Password </label>
  Passwords Should be 7 Characters in Length and include one special Character. 
    </p>
    <p>
        <label>Step 3: Enter Agent Assistant Information </label>
       Fill out required fields with the newly appointed Agent Assistants Information. 
    </p>
    
    <p>
    <label>Step 4: Add Agent Assistant </label>
Once all fields have the required information Click the Add Agent Assistant button and the new Agent Assistant will be created. Proceed to the Add Agents to Agent Assistant page to Assign Agents to the Agent Assistant. 
    </p>
  
</form>
' data-placement="top" data-original-title="Create New Agent Assistant">Instructions</a>

    </div>
</div>

JavaScript

$('a[rel=popover]').popover({
    html: 'true',
placement: 'right'
})