qTip Test

http://stackoverflow.com/questions/11758080/how-to-trigger-a-pop-up-using-qtip

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/base/jquery-ui.css">
<script src="http://craigsworks.com/projects/qtip2/packages/latest/jquery.qtip.min.js"></script>
<link rel="stylesheet" href="http://craigsworks.com/projects/qtip2/packages/latest/jquery.qtip.min.css">
<a id="id1" href="#">Text 1</a>
<a id="id2" class="qtip" href="#">Text 2</a>
<a id="id3" href="#">Text 3</a>
<span class="qtip2" data-info="This is">Text 4</span>
<span class="qtip2" data-info="Thewris">Text 5</span>
<button data-info="with more">Text 5</button>
<button data-info="Information">Text 6</button>

CSS

body {
    padding: 50px;
    .qtip2{display:inline-block;height:15px;width:15px; cursor:pointer; margin-left:10px;}
}

JavaScript

$(document).ready(function () 
{
	

	$(".qtip2").each(function() {
	
	$(this).qtip({
	content: {
            text: function() {
                return $(this).attr("data-info");
            },
            title: {
                text: 'Modal qTip for Buttons',
                button: true
            }
        },
    show: 'click',
    hide: 'unfocus',
	style: { 
      width: 200,
      padding: 5,
      background: '#E5F4DD',
      color: '#111',
      textAlign: 'left',
      border: {
   
         radius: 4,
         color: '#E5F4DD'
      }},
	  position: { adjust: { x: 0, y: -60 } }
});
});
	

		
  });