JSFiddle - React, Tailwind, and code Playground

by Rad W

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<html lang="en">
	<body style="">

        <div id="wrap">
            <div class="content">


                <div class="container-fluid">
                    <div class="main-content-wrapper">
                        
                        
<div class="col-md-12 col-sm-12 main-content">

    
    
        <div class="alert alert-warning">
            <button type="button" class="close" data-dismiss="alert">×</button>
        WARNING: Invalid alarm definitions detected: (100727 - Coldbrook:Flow 1)
        </div>
    


    <h3><i class="fa fa-fire"></i> Currently In Alarm</h3>

    
    <div class="row">
                <div class="col-md-6 col-sm-6">
                    <p><span class="badge">{{ inalarm_list|length }} Alarms Triggered.</span></p> <!-- dictionary length attirbute used -->
                </div>
                <div class="col-md-6 col-sm-6 text-right">
                    <button id="element" type="button" class="btn btn-default btn-xs" data-container="#element" data-html="true" data-toggle="popover" data-placement="auto" data-title="Legend" data-content="<b>Dates</b>: Yellow if dates are different.<br> <b>Location</b>: See alarms for specific location only.<br> <b>Field</b>: See alarms graphs for specific key.<br> <b>Location</b>: See alarms for specific location only.<br> <b>Value</b>: Arrow jumps to specific alarm definition."><i class="fa fa-compass"></i> Legend</button>
                    <button class="btn btn-success btn-xs acknowledge" value="Acknowledge selected alarms" title="By Pressing this button, selected alarms will be moved to history." id="acknowledge_selected_alarm_data"><i class="fa fa-check"></i> Acknowledge Selected Alarm</button>
                </div>
            </div>
    
    <hr>
    <h3><i class="fa fa-bell"></i> Defined Alarms</h3>

  ...

JavaScript

$('[data-toggle="popover"]').popover()