How to make use of it:

Download and import the ‘theroom.js’ into the doc.

<script src="dist/theroom.min.js"></script>

Initialize the TheRoom and finished.

theRoom.start();

To create an info bar that shows the present HTML tag, and CSS ID/class.

var template="";
    template += "<div id=\"theroom-info\">";
    template += "  <span id=\"theroom-tag\"><\/span>";
    template += "  <span id=\"theroom-id\"><\/span>";
    template += "  <span id=\"theroom-class\"><\/span>";
    template += "<\/div>";
    template += "";
    template += "<style>";
    template += "  #theroom-info {";
    template += "    position: fixed;";
    template += "    bottom: 0;";
    template += "    width: 100%;";
    template += "    left: 0;";
    template += "    font-family: \"Courier\";";
    template += "    background-color: #ffffff;";
    template += "    padding: 10px;";
    template += "    color: #333333;";
    template += "    text-align: center;";
    template += "    box-shadow: 0px 4px 20px rgba(0,0,0,0.3);";
    template += "  }";
    template += "";
    template += "  #theroom-tag {";
    template += "    color: #C2185B;";
    template += "  }";
    template += "";
    template += "  #theroom-id {";
    template += "    color: #5D4037;";
    template += "  }";
    template += "";
    template += "  #theroom-class {";
    template += "    color: #607D8B;";
    template += "  }";
    template += "<\/style>";

var options = {
  template: template,
  showInfo: true
};

// initialize
theRoom.start(options);

More plugin choices with default values.

var options = {

    // namespace
    namespace: "theroom",

    // background color of the overlay
    bgcolor: "rgba(255,0,0,0.5)",

    // transition speed in milliseconds
    transitionSpeed: 200,

    // uses inline style attribute instead style
    useInline: true,

    // exclude these tags
    exceptions: [
      "head",
      "meta",
      "link",
      "style",
      "title",
      "script"
    ]
    
}

Callback features are out there.

var options = {

    onStart: null,
    onStarting: null,
    onStop: null,
    onStopping: null,
    onClick: null,    
}

Highlight DOM Elements On Hover, javascript highlight element, mouseover event target, animate css3, theroomjs Plugin/Github

See Demo And Download