JSFiddle - React, Tailwind, and code Playground

by David Gonzalez

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div style="border: 1px solid blue;">
    Area 1 (for example a sidebar)
    <gcse:searchbox></gcse:searchbox>
</div>

<div style="border: 1px solid red;">
    Area 2 (for example main area of the page)
    <gcse:searchresults></gcse:searchresults>
</div>
<button id ="action" onclick= "doAction();">do</button>
<a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover</a>

JavaScript

// Make sure in jsFiddle you have selected option onLoad.
(function() {
  var cx = '017643444788069204610:4gvhea_mvga'; // Insert your own Custom Search Engine ID here
  var gcse = document.createElement('script'); gcse.type = 'text/javascript'; gcse.async = true;
  gcse.src = (document.location.protocol == 'https' ? 'https:' : 'http:') +
      '//www.google.com/cse/cse.js?cx=' + cx;
  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s);
})();
function doAction(){  
  var popOverOptions = {trigger: "hover",
  content: function(){
  	return $(this).attr('href');
  }};
   $("a.gs-title").popover(popOverOptions);   
}