JSFiddle - React, Tailwind, and code Playground

by marhaba

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
    
    <div class="container-fluid">
      <div class="row-fluid">
        <div class="span12" style="margin-top: 50px;">
            
          <!-- Popover Example 1 - HTML -->
          <!-- Popover using HTML to set content and title --> 
            
          <!-- Still requires at least $("[data-toggle=popover]").popover(); to enabled it via JavaScript! -->
          <!-- Alternatively, you can use id="myPopover" or class="myPopover" no need to use data-toggle tag (!) -->
          <!-- Just remember to change JavaScript to e.g., $("#myPopover").popover(); in those cases, see example 2 -->
          <a href="#" 
            data-toggle="popover" 
            data-html="true" 
            data-content="<div><b>Popover Example</b> 1 - Content</div>"
            title="Popover Example <b>1</b> - Title">Popover Example 1</a>
          
          <br /><br />
            
          <!-- Popover Example 2 - JS -->
          <!-- Popover using JavaScript to set content from hidden div --> 
          <a href="#" id="popoverExampleTwo">Popover Example 2</a>
            
          <!-- Popover 2 hidden content -->
          <div id="popoverExampleTwoHiddenContent" style="display: none">
             <div><b>Popover Example</b> 2 - Content</div>
          </div>  
          <!-- Popover 2 hidden title -->
          <div id="popoverExampleTwoHiddenTitle" style="display: none">
             Popover Example <b>2</b> - Title
          </div>  
            
        </div>
      </div>
    </div>

CSS

body {
    padding: 20px;
}

JavaScript

$(function(){
    
    // Enabling Popover Example 1 - HTML (content and title from html tags of element)
    $("[data-toggle=popover]").popover();

    // Enabling Popover Example 2 - JS (hidden content and title capturing)
    $("#popoverExampleTwo").popover({
        html : true, 
        content: function() {
          return $('#popoverExampleTwoHiddenContent').html();
        },
        title: function() {
          return $('#popoverExampleTwoHiddenTitle').html();
        }
    });

});