firewall_gui: update templates to provide tooltip help

60beaed9 · Bence Dányi · 79851505 · 60beaed9 · 60beaed9 · 60beaed9
Commit 60beaed9 authored May 17, 2013 by Bence Dányi
7 changed files
--- a/firewall_gui/static/partials/domain-edit.html
+++ b/firewall_gui/static/partials/domain-edit.html
@@ -3,25 +3,51 @@
    <div class="control-group">
      <label class="control-label" for="ID">ID</label>
      <div class="controls">
-        <input class="input-mini" type="text" id="ID" placeholder="ID" value="{{entity.id}}" disabled="disabled">
+        <span class="has-tooltip" title="Built in ID, do not change this">
+          <input
+            class="input-mini"
+            type="text"
+            id="ID"
+            placeholder="ID"
+            value="{{entity.id}}"
+            disabled="disabled" />
+        </span>
      </div>
    </div>
    <div class="control-group">
      <label class="control-label" for="created_at">Created at</label>
      <div class="controls">
-        <input class="input" type="text" id="created_at" ng-model="entity.created_at" disabled="disabled">
+        <span class="has-tooltip" title="Entity was created at this date">
+          <input
+            class="input"
+            type="text"
+            id="created_at"
+            ng-model="entity.created_at"
+            disabled="disabled" />
+        </span>
      </div>
    </div>
    <div class="control-group">
      <label class="control-label" for="modified_at">Modified at</label>
      <div class="controls">
-        <input class="input" type="text" id="modified_at" ng-model="entity.modified_at" disabled="disabled">
+        <span class="has-tooltip" title="Entity was last modified at this date">
+          <input
+            class="input"
+            type="text"
+            id="modified_at"
+            ng-model="entity.modified_at"
+            disabled="disabled" />
+        </span>
      </div>
    </div>
    <div class="control-group" ng-class="hasError('name')">
      <label class="control-label" for="name">Name</label>
      <div class="controls">
-        <input type="text" id="name" ng-model="entity.name" />
+        <input
+          type="text"
+          id="name"
+          ng-model="entity.name"
+          title="Domain name" />
        <span class="help-inline" ng-bind="getError('name')"></span>
      </div>
    </div>
@@ -30,21 +56,35 @@
    <div class="control-group" ng-class="hasError('owner')">
      <label class="control-label" for="owner">Owner</label>
      <div class="controls">
-        <input type="text" class="owner" autocomplete="off" id="owner" ng-model="entity.owner.name" />
+        <input
+          type="text"
+          class="owner"
+          autocomplete="off"
+          id="owner"
+          ng-model="entity.owner.name"
+          title="Owners name" />
        <span class="help-inline" ng-bind="getError('owner')"></span>
      </div>
    </div>
    <div class="control-group" ng-class="hasError('ttl')">
      <label class="control-label" for="ttl">TTL</label>
      <div class="controls">
-        <input type="text" autocomplete="off" id="ttl" ng-model="entity.ttl" />
+        <input
+          type="text"
+          autocomplete="off"
+          id="ttl"
+          ng-model="entity.ttl"
+          title="Time To Live" />
        <span class="help-inline" ng-bind="getError('ttl')"></span>
      </div>
    </div>
    <div class="control-group" ng-class="hasError('description')">
      <label class="control-label" for="description">Description</label>
      <div class="controls">
-        <textarea rows="2" id="description" ng-model="entity.description">
+        <textarea rows="2"
+          id="description"
+          ng-model="entity.description"
+          title="Short description">
        </textarea>
        <span class="help-inline" ng-bind="getError('description')"></span>
      </div>

--- a/firewall_gui/static/partials/host-edit.html
+++ b/firewall_gui/static/partials/host-edit.html
@@ -3,67 +3,122 @@
    <div class="control-group">
      <label class="control-label" for="ID">ID</label>
      <div class="controls">
-        <input class="input-mini" type="text" id="ID" placeholder="ID" value="{{entity.id}}" disabled="disabled">
+        <span class="has-tooltip" title="Built in ID, do not change this">
+          <input
+            class="input-mini"
+            type="text"
+            id="ID"
+            placeholder="ID"
+            value="{{entity.id}}"
+            disabled="disabled" />
+        </span>
      </div>
    </div>
    <div class="control-group">
      <label class="control-label" for="created_at">Created at</label>
      <div class="controls">
-        <input class="input" type="text" id="created_at" ng-model="entity.created_at" disabled="disabled">
+        <span class="has-tooltip" title="Entity was created at this date">
+          <input
+            class="input"
+            type="text"
+            id="created_at"
+            ng-model="entity.created_at"
+            disabled="disabled">
+        </span>
      </div>
    </div>
    <div class="control-group">
      <label class="control-label" for="modified_at">Modified at</label>
      <div class="controls">
-        <input class="input" type="text" id="modified_at" ng-model="entity.modified_at" disabled="disabled">
+        <span class="has-tooltip" title="Entity was last modified at this date">
+          <input
+            class="input"
+            type="text"
+            id="modified_at"
+            ng-model="entity.modified_at"
+            disabled="disabled" />
+        </span>
      </div>
    </div>
    <div class="control-group" ng-class="hasError('name')">
      <label class="control-label" for="name">Name</label>
      <div class="controls">
-        <input type="text" id="name" ng-model="entity.name" />
+        <input
+          type="text"
+          id="name"
+          ng-model="entity.name"
+          title="Name of the host" />
        <span class="help-inline" ng-bind="getError('name')"></span>
      </div>
    </div>
    <div class="control-group" ng-class="hasError('mac')">
      <label class="control-label" for="mac">MAC</label>
      <div class="controls">
-        <input type="text" id="mac" ng-model="entity.mac" />
+        <input
+          type="text"
+          id="mac"
+          ng-model="entity.mac"
+          title="MAC address" />
        <span class="help-inline" ng-bind="getError('mac')"></span>
      </div>
    </div>
    <div class="control-group" ng-class="hasError('ipv4')">
      <label class="control-label" for="ipv4">IPv4</label>
      <div class="controls">
-        <input type="text" id="ipv4" ng-model="entity.ipv4" />
+        <input
+          type="text"
+          id="ipv4"
+          ng-model="entity.ipv4"
+          title="IPv4 address" />
        <span class="help-inline" ng-bind="getError('ipv4')"></span>
      </div>
    </div>
    <div class="control-group" ng-class="hasError('pub_ipv4')">
      <label class="control-label" for="pub_ipv4">Public IPv4</label>
      <div class="controls">
-        <input type="text" id="pub_ipv4" ng-model="entity.pub_ipv4" />
+        <input
+          type="text"
+          id="pub_ipv4"
+          ng-model="entity.pub_ipv4"
+          title="Public IPv4 address" />
        <span class="help-inline" ng-bind="getError('pub_ipv4')"></span>
      </div>
    </div>
    <div class="control-group" ng-class="hasError('ipv6')">
      <label class="control-label" for="ipv6">IPv6</label>
      <div class="controls">
-        <input type="text" class="input-xlarge" id="ipv6" ng-model="entity.ipv6" />
+        <input
+          type="text"
+          class="input-xlarge"
+          id="ipv6"
+          ng-model="entity.ipv6"
+          title="IPv6 address" />
        <span class="help-inline" ng-bind="getError('ipv6')"></span>
      </div>
    </div>
    <div class="control-group" ng-class="hasError('owner')">
      <label class="control-label" for="owner">Owner</label>
      <div class="controls">
-        <input type="text" class="owner" autocomplete="off" id="owner" ng-model="entity.owner.name" />
+        <input
+          type="text"
+          class="owner"
+          autocomplete="off"
+          id="owner"
+          ng-model="entity.owner.name"
+          title="Owners name" />
        <span class="help-inline" ng-bind="getError('owner')"></span>
      </div>
    </div>
    <div class="control-group" ng-class="hasError('vlan')">
      <label class="control-label" for="vlan">Vlan</label>
      <div class="controls">
-        <input type="text" data-provide="typeahead" autocomplete="off" class="vlan" id="vlan" ng-model="entity.vlan.name" />
+        <input
+          type="text"
+          autocomplete="off"
+          class="vlan"
+          id="vlan"
+          ng-model="entity.vlan.name"
+          title="Vlan of this host #TODO" />
        <span class="help-inline" ng-bind="getError('vlan')"></span>
      </div>
    </div>
@@ -72,7 +127,10 @@
    <div class="control-group" ng-class="hasError('description')">
      <label class="control-label" for="description">Description</label>
      <div class="controls">
-        <textarea rows="4" id="description" ng-model="entity.description">
+        <textarea rows="4"
+          id="description"
+          ng-model="entity.description"
+          title="Short description">
        </textarea>
        <span class="help-inline" ng-bind="getError('description')"></span>
      </div>
@@ -87,7 +145,10 @@
    <div class="control-group" ng-class="hasError('comment')">
      <label class="control-label" for="comment">Comment</label>
      <div class="controls">
-        <textarea rows="2" id="comment" ng-model="entity.comment">
+        <textarea rows="2"
+          id="comment"
+          ng-model="entity.comment"
+          title="Some comments... or something like that #TODO">
        </textarea>
        <span class="help-inline" ng-bind="getError('comment')"></span>
      </div>
@@ -101,7 +162,7 @@
            <a href ng-click="removeHostGroup(group)"><i class="icon-remove"></i></a>
          </span>
        </div>
-        <div class="input-append">
+        <div class="input-append has-tooltip" title="Hostgroups of this host">
          <input class="span2 hostgroup" id="hostgroup" type="text" ng-model="newGroup">
          <button class="btn" type="button" ng-click="addHostGroup(newGroup)">Add</button>
          <span class="help-inline" ng-bind="getError('groups')"></span>

--- a/firewall_gui/static/partials/hostgroup-edit.html
+++ b/firewall_gui/static/partials/hostgroup-edit.html
@@ -3,25 +3,51 @@
    <div class="control-group">
      <label class="control-label" for="ID">ID</label>
      <div class="controls">
-        <input class="input-mini" type="text" id="ID" placeholder="ID" value="{{entity.id}}" disabled="disabled">
+        <span class="has-tooltip" title="Built in ID, do not change this">
+          <input
+            class="input-mini"
+            type="text"
+            id="ID"
+            placeholder="ID"
+            value="{{entity.id}}"
+            disabled="disabled" />
+        </span>
      </div>
    </div>
    <div class="control-group">
      <label class="control-label" for="created_at">Created at</label>
      <div class="controls">
-        <input class="input" type="text" id="created_at" ng-model="entity.created_at" disabled="disabled">
+        <span class="has-tooltip" title="Entity was created at this date">
+          <input
+            class="input"
+            type="text"
+            id="created_at"
+            ng-model="entity.created_at"
+            disabled="disabled" />
+        </span>
      </div>
    </div>
    <div class="control-group">
      <label class="control-label" for="modified_at">Modified at</label>
      <div class="controls">
-        <input class="input" type="text" id="modified_at" ng-model="entity.modified_at" disabled="disabled">
+        <span class="has-tooltip" title="Entity was last modified at this date">
+          <input
+            class="input"
+            type="text"
+            id="modified_at"
+            ng-model="entity.modified_at"
+            disabled="disabled" />
+        </span>
      </div>
    </div>
    <div class="control-group" ng-class="hasError('name')">
      <label class="control-label" for="name">Name</label>
      <div class="controls">
-        <input type="text" id="name" ng-model="entity.name" />
+        <input
+          type="text"
+          id="name"
+          ng-model="entity.name"
+          title="Name for this Hostgroup" />
        <span class="help-inline" ng-bind="getError('name')"></span>
      </div>
    </div>
@@ -30,16 +56,25 @@
    <div class="control-group" ng-class="hasError('owner')">
      <label class="control-label" for="owner">Owner</label>
      <div class="controls">
-        <input type="text" class="owner" autocomplete="off" id="owner" ng-model="entity.owner.name" />
+        <input
+          type="text"
+          class="owner"
+          autocomplete="off"
+          id="owner"
+          ng-model="entity.owner.name"
+          title="Owners name" />
        <span class="help-inline" ng-bind="getError('owner')"></span>
      </div>
    </div>
    <div class="control-group" ng-class="hasError('description')">
      <label class="control-label" for="description">Description</label>
      <div class="controls">
-        <textarea rows="4" id="description" ng-model="entity.description">
+        <textarea rows="4"
-          <span class="help-inline" ng-bind="getError('description')"></span>
+          id="description"
+          ng-model="entity.description"
+          title="Short description">
        </textarea>
+        <span class="help-inline" ng-bind="getError('description')"></span>
      </div>
    </div>
    <div class="control-group">

--- a/firewall_gui/static/partials/record-edit.html
+++ b/firewall_gui/static/partials/record-edit.html
@@ -3,39 +3,75 @@
    <div class="control-group">
      <label class="control-label" for="ID">ID</label>
      <div class="controls">
-        <input class="input-mini" type="text" id="ID" placeholder="ID" value="{{entity.id}}" disabled="disabled">
+        <span class="has-tooltip" title="Built in ID, do not change this">
+          <input
+            class="input-mini"
+            type="text"
+            id="ID"
+            placeholder="ID"
+            value="{{entity.id}}"
+            disabled="disabled" />
+        </span>
      </div>
    </div>
    <div class="control-group">
      <label class="control-label" for="created_at">Created at</label>
      <div class="controls">
-        <input class="input" type="text" id="created_at" ng-model="entity.created_at" disabled="disabled">
+        <span class="has-tooltip" title="Entity was created at this date">
+          <input
+            class="input"
+            type="text"
+            id="created_at"
+            ng-model="entity.created_at"
+            disabled="disabled" />
+        </span>
      </div>
    </div>
    <div class="control-group">
      <label class="control-label" for="modified_at">Modified at</label>
      <div class="controls">
-        <input class="input" type="text" id="modified_at" ng-model="entity.modified_at" disabled="disabled">
+        <span class="has-tooltip" title="Entity was last modified at this date">
+          <input
+            class="input"
+            type="text"
+            id="modified_at"
+            ng-model="entity.modified_at"
+            disabled="disabled" />
+        </span>
      </div>
    </div>
    <div class="control-group" ng-class="hasError('name')">
      <label class="control-label" for="name">Name</label>
      <div class="controls">
-        <input type="text" id="name" ng-model="entity.name" />
+        <input
+          type="text"
+          id="name"
+          ng-model="entity.name"
+          title="Name of the DNS record" />
        <span class="help-inline" ng-bind="getError('name')"></span>
      </div>
    </div>
    <div class="control-group" ng-class="hasError('domain')">
      <label class="control-label" for="domain">Domain</label>
      <div class="controls">
-        <input type="text" id="domain" class="domain" ng-model="entity.domain.name" />
+        <input
+          type="text"
+          id="domain"
+          class="domain"
+          ng-model="entity.domain.name"
+          title="Domain belonging to this record" />
        <span class="help-inline" ng-bind="getError('domain')"></span>
      </div>
    </div>
    <div class="control-group" ng-class="hasError('host')">
      <label class="control-label" for="host">Host</label>
      <div class="controls">
-        <input type="text" class="host" id="host" ng-model="entity.host.name" />
+        <input
+          type="text"
+          class="host"
+          id="host"
+          ng-model="entity.host.name"
+          title="Host belonging to this record" />
        <span class="help-inline" ng-bind="getError('host')"></span>
      </div>
    </div>
@@ -44,7 +80,7 @@
    <div class="control-group" ng-class="hasError('type')">
      <label class="control-label" for="type">Type</label>
      <div class="controls">
-        <select id="type" ng-model="entity.type">
+        <select id="type" ng-model="entity.type" title="Record type">
          <option value="A">A</option>
          <option value="CNAME">CNAME</option>
          <option value="AAAA">AAAA</option>
@@ -58,21 +94,35 @@
    <div class="control-group" ng-class="hasError('owner')">
      <label class="control-label" for="owner">Owner</label>
      <div class="controls">
-        <input type="text" class="owner" autocomplete="off" id="owner" ng-model="entity.owner.name" />
+        <input
+          type="text"
+          class="owner"
+          autocomplete="off"
+          id="owner"
+          ng-model="entity.owner.name"
+          title="Owners name" />
        <span class="help-inline" ng-bind="getError('owner')"></span>
      </div>
    </div>
    <div class="control-group" ng-class="hasError('address')">
      <label class="control-label" for="address">Address</label>
      <div class="controls">
-        <input type="text" autocomplete="off" id="address" ng-model="entity.address" />
+        <input
+          type="text"
+          autocomplete="off"
+          id="address"
+          ng-model="entity.address"
+          title="Address #TODO" />
        <span class="help-inline" ng-bind="getError('address')"></span>
      </div>
    </div>
    <div class="control-group" ng-class="hasError('description')">
      <label class="control-label" for="description">Description</label>
      <div class="controls">
-        <textarea rows="2" id="description" ng-model="entity.description">
+        <textarea rows="2"
+          id="description"
+          ng-model="entity.description"
+          title="Short description">
        </textarea>
        <span class="help-inline" ng-bind="getError('description')"></span>
      </div>

--- a/firewall_gui/static/partials/rule-edit.html
+++ b/firewall_gui/static/partials/rule-edit.html
@@ -3,25 +3,49 @@
    <div class="control-group">
      <label class="control-label" for="ID">ID</label>
      <div class="controls">
-        <input class="input-mini" type="text" id="ID" placeholder="ID" value="{{entity.id}}" disabled="disabled">
+        <span class="has-tooltip" title="Built in ID, do not change this">
+          <input
+            class="input-mini"
+            type="text"
+            id="ID"
+            placeholder="ID"
+            value="{{entity.id}}"
+            disabled="disabled">
+        </span>
      </div>
    </div>
    <div class="control-group">
      <label class="control-label" for="created_at">Created at</label>
      <div class="controls">
-        <input class="input" type="text" id="created_at" ng-model="entity.created_at" disabled="disabled">
+        <span class="has-tooltip" title="The entity was created at this date">
+          <input
+            class="input"
+            type="text"
+            id="created_at"
+            ng-model="entity.created_at"
+            disabled="disabled" />
+        </span>
      </div>
    </div>
    <div class="control-group">
      <label class="control-label" for="modified_at">Modified at</label>
      <div class="controls">
-        <input class="input" type="text" id="modified_at" ng-model="entity.modified_at" disabled="disabled">
+        <span class="has-tooltip" title="The entity was last modified at this date">
+          <input
+          class="input"
+          type="text"
+          id="modified_at"
+          ng-model="entity.modified_at"
+          disabled="disabled" />
+        </span>
      </div>
    </div>
    <div class="control-group">
      <label class="control-label" for="targetType">Target type</label>
      <div class="controls">
-        <select id="targetType" ng-model="entity.target.type">
+        <select id="targetType"
+          ng-model="entity.target.type"
+          title="Entity type of the rules target">
          <option value="vlan">Vlan</option>
          <option value="vlangroup">VlanGroup</option>
          <option value="host">Host</option>
@@ -33,36 +57,60 @@
    <div class="control-group" ng-class="hasError('targetName')">
      <label class="control-label" for="targetName">Target</label>
      <div class="controls">
-        <input type="text" data-provide="typeahead" autocomplete="off" id="targetName" ng-model="entity.target.name" />
+        <input
+          title="Target of the rule, can be a Vlan, Vlangroup, Host, Hostgroup or a Firewall"
+          type="text"
+          autocomplete="off"
+          id="targetName"
+          ng-model="entity.target.name" />
        <span class="help-inline" ng-bind="getError('targetName')"></span>
      </div>
    </div>
    <div class="control-group">
      <label class="control-label" for="direction">Direction</label>
      <div class="controls">
-        <select id="direction" ng-options="choice[0] as choice[1] for choice in entity.direction.choices" ng-model="entity.direction.value">
+        <select id="direction"
+          ng-options="choice[0] as choice[1] for choice in entity.direction.choices"
+          ng-model="entity.direction.value"
+          title="Traffic direction">
        </select>
      </div>
    </div>
    <div class="control-group">
      <label class="control-label" for="proto">Protocol</label>
      <div class="controls">
-        <select id="proto" ng-options="choice[0] as choice[1] for choice in entity.proto.choices" ng-model="entity.proto.value">
+        <select id="proto"
-          <option value="">None</option>
+          ng-options="choice[0] as choice[1] for choice in entity.proto.choices"
+          ng-model="entity.proto.value"
+          title="Protocol filter">
+          <option value="">all</option>
        </select>
      </div>
    </div>
    <div class="control-group" ng-class="hasError('owner')">
      <label class="control-label" for="owner">Owner</label>
      <div class="controls">
-        <input type="text" class="owner" autocomplete="off" id="owner" ng-model="entity.owner.name" />
+        <input
+          title="Owner of this rule"
+          type="text"
+          class="owner"
+          autocomplete="off"
+          id="owner"
+          ng-model="entity.owner.name" />
        <span class="help-inline" ng-bind="getError('owner')"></span>
      </div>
    </div>
    <div class="control-group" ng-class="hasError('foreign_network')">
      <label class="control-label" for="foreign_network">Foreign network</label>
      <div class="controls">
-        <input type="text" data-provide="typeahead" autocomplete="off" id="foreign_network" class="vlangroup" ng-model="entity.foreignNetwork.name" />
+        <input
+          title="Foreign Network"
+          type="text"
+          data-provide="typeahead"
+          autocomplete="off"
+          id="foreign_network"
+          class="vlangroup"
+          ng-model="entity.foreignNetwork.name" />
        <span class="help-inline" ng-bind="getError('foreign_network')"></span>
      </div>
    </div>
@@ -71,7 +119,10 @@
    <div class="control-group">
      <label class="control-label" for="description">Description</label>
      <div class="controls">
-        <textarea rows="2" id="description" ng-model="entity.description">
+        <textarea id="description"
+          ng-model="entity.description"
+          rows="2"
+          title="Short description of the rule">
        </textarea>
      </div>
    </div>
@@ -92,28 +143,46 @@
    <div class="control-group" ng-class="hasError('dport')">
      <label class="control-label" for="dport">Destination port</label>
      <div class="controls">
-        <input class="input-mini" type="number" id="dport" ng-model="entity.dport">
+        <input
+          class="input-mini"
+          type="number"
+          id="dport"
+          ng-model="entity.dport"
+          title="Destination port">
        <span class="help-inline" ng-bind="getError('dport')"></span>
      </div>
    </div>
    <div class="control-group" ng-class="hasError('nat_dport')">
      <label class="control-label" for="nat_dport">NAT Destination port</label>
      <div class="controls">
-        <input class="input-mini" type="number" id="nat_dport" ng-model="entity.nat_dport">
+        <input
+          class="input-mini"
+          type="number"
+          id="nat_dport"
+          ng-model="entity.nat_dport"
+          title="NAT Destination port">
        <span class="help-inline" ng-bind="getError('nat_dport')"></span>
      </div>
    </div>
    <div class="control-group" ng-class="hasError('sport')">
      <label class="control-label" for="sport">Source port</label>
      <div class="controls">
-        <input class="input-mini" type="number" id="sport" ng-model="entity.sport">
+        <input
+          class="input-mini"
+          type="number"
+          id="sport"
+          ng-model="entity.sport"
+          title="Source port">
        <span class="help-inline" ng-bind="getError('sport')"></span>
      </div>
    </div>
    <div class="control-group">
      <label class="control-label" for="extra">Extra</label>
      <div class="controls">
-        <textarea rows="2" id="extra" ng-model="entity.extra">
+        <textarea id="extra"
+          ng-model="entity.extra"
+          rows="2"
+          title="I have no idea what is this... #TODO">
        </textarea>
      </div>
    </div>

--- a/firewall_gui/static/partials/vlan-edit.html
+++ b/firewall_gui/static/partials/vlan-edit.html
@@ -3,67 +3,123 @@
    <div class="control-group">
      <label class="control-label" for="ID">ID</label>
      <div class="controls">
-        <input class="input-mini" type="text" id="ID" placeholder="ID" value="{{entity.id}}" disabled="disabled">
+        <span class="has-tooltip" title="Built in ID, do not change this">
+          <input
+            class="input-mini"
+            type="text"
+            id="ID"
+            placeholder="ID"
+            value="{{entity.id}}"
+            disabled="disabled" />
+        </span>
      </div>
    </div>
    <div class="control-group" ng-class="hasError('vid')">
      <label class="control-label" for="VID">VID</label>
      <div class="controls">
-        <input class="input-mini" type="text" id="VID" placeholder="ID" ng-model="entity.vid">
+        <input
+          class="input-mini"
+          type="text"
+          id="VID"
+          placeholder="ID"
+          ng-model="entity.vid"
+          title="Vlan ID, you can change this" />
        <span class="help-inline" ng-bind="getError('vid')"></span>
      </div>
    </div>
    <div class="control-group">
      <label class="control-label" for="created_at">Created at</label>
      <div class="controls">
-        <input class="input" type="text" id="created_at" ng-model="entity.created_at" disabled="disabled">
+        <span class="has-tooltip" title="The entity was created at this date">
+          <input
+            class="input"
+            type="text"
+            id="created_at"
+            ng-model="entity.created_at"
+            disabled="disabled" />
+        </span>
      </div>
    </div>
    <div class="control-group">
      <label class="control-label" for="modified_at">Modified at</label>
      <div class="controls">
-        <input class="input" type="text" id="modified_at" ng-model="entity.modified_at" disabled="disabled">
+        <span class="has-tooltip" title="The entity was last modified at this date">
+          <input
+            class="input"
+            type="text"
+            id="modified_at"
+            ng-model="entity.modified_at"
+            disabled="disabled" />
+        </span>
      </div>
    </div>
    <div class="control-group" ng-class="hasError('name')">
      <label class="control-label" for="name">Name</label>
      <div class="controls">
-        <input type="text" id="name" ng-model="entity.name" />
+        <input
+          type="text"
+          id="name"
+          ng-model="entity.name"
+          title="Name of this Vlan" />
        <span class="help-inline" ng-bind="getError('name')"></span>
      </div>
    </div>
    <div class="control-group" ng-class="hasError('ipv4')">
      <label class="control-label" for="ipv4">IPv4</label>
      <div class="controls">
-        <input type="text" id="ipv4" ng-model="entity.ipv4" />
+        <input
+          type="text"
+          id="ipv4"
+          ng-model="entity.ipv4"
+          title="IPv4 address of this Vlan (with subnet mask)" />
        <span class="help-inline" ng-bind="getError('ipv4')"></span>
      </div>
    </div>
    <div class="control-group" ng-class="hasError('ipv6')">
      <label class="control-label" for="ipv6">IPv6</label>
      <div class="controls">
-        <input type="text" class="input-xlarge" id="ipv6" ng-model="entity.ipv6" />
+        <input
+          type="text"
+          class="input-xlarge"
+          id="ipv6"
+          ng-model="entity.ipv6"
+          title="IPv6 address of this Vlan (with subnet mask)" />
        <span class="help-inline" ng-bind="getError('ipv6')"></span>
      </div>
    </div>
    <div class="control-group" ng-class="hasError('snat_ip')">
      <label class="control-label" for="snat_ip">NAT</label>
      <div class="controls">
-        <input type="text" id="snat_ip" ng-model="entity.nat" />
+        <input
+          type="text"
+          id="snat_ip"
+          ng-model="entity.nat"
+          title="NAT IP for this Vlan" />
        <span class="help-inline" ng-bind="getError('snat_ip')"></span>
      </div>
    </div>
    <div class="control-group" ng-class="hasError('owner')">
      <label class="control-label" for="owner">Owner</label>
      <div class="controls">
-        <input type="text" class="owner" autocomplete="off" id="owner" ng-model="entity.owner.name" />
+        <input
+          type="text"
+          class="owner"
+          autocomplete="off"
+          id="owner"
+          ng-model="entity.owner.name"
+          title="Owners name" />
        <span class="help-inline" ng-bind="getError('owner')"></span>
      </div>
    </div>
    <div class="control-group" ng-class="hasError('interface')">
      <label class="control-label" for="interface">Interface</label>
      <div class="controls">
-        <input type="text" autocomplete="off" id="interface" ng-model="entity.interface" />
+        <input
+          type="text"
+          autocomplete="off"
+          id="interface"
+          ng-model="entity.interface"
+          title="#TODO" />
        <span class="help-inline" ng-bind="getError('interface')"></span>
      </div>
    </div>
@@ -72,21 +128,36 @@
    <div class="control-group" ng-class="hasError('domain')">
      <label class="control-label" for="domain">Domain</label>
      <div class="controls">
-        <input type="text" class="domain" data-provide="typeahead" autocomplete="off" id="domain" ng-model="entity.domain.name" />
+        <input
+          type="text"
+          class="domain"
+          data-provide="typeahead"
+          autocomplete="off"
+          id="domain"
+          ng-model="entity.domain.name"
+          title="Domain name" />
        <span class="help-inline" ng-bind="getError('domain')"></span>
      </div>
    </div>
    <div class="control-group" ng-class="hasError('reverse_domain')">
      <label class="control-label" for="reverse_domain">Reverse domain</label>
      <div class="controls">
-        <input type="text" autocomplete="off" id="reverse_domain" ng-model="entity.reverse_domain" />
+        <input
+          type="text"
+          autocomplete="off"
+          id="reverse_domain"
+          ng-model="entity.reverse_domain"
+          title="Reverse domain name" />
        <span class="help-inline" ng-bind="getError('reverse_domain')"></span>
      </div>
    </div>
    <div class="control-group" ng-class="hasError('description')">
      <label class="control-label" for="description">Description</label>
      <div class="controls">
-        <textarea rows="2" id="description" ng-model="entity.description">
+        <textarea id="description"
+          rows="2"
+          ng-model="entity.description"
+          title="Short description">
        </textarea>
        <span class="help-inline" ng-bind="getError('description')"></span>
      </div>
@@ -94,7 +165,10 @@
    <div class="control-group" ng-class="hasError('comment')">
      <label class="control-label" for="comment">Comment</label>
      <div class="controls">
-        <textarea rows="2" id="comment" ng-model="entity.comment">
+        <textarea id="comment"
+          rows="2"
+          ng-model="entity.comment"
+          title="Some comments... #TODO">
        </textarea>
        <span class="help-inline" ng-bind="getError('comment')"></span>
      </div>
@@ -102,7 +176,10 @@
    <div class="control-group" ng-class="hasError('dhcp_pool')">
      <label class="control-label" for="dhcp_pool">DHCP Pool</label>
      <div class="controls">
-        <textarea rows="2" id="dhcp_pool" ng-model="entity.dhcp_pool">
+        <textarea id="dhcp_pool"
+          rows="2"
+          ng-model="entity.dhcp_pool"
+          title="Some DHCP Pool related thing... #TODO">
        </textarea>
        <span class="help-inline" ng-bind="getError('dhcp_pool')"></span>
      </div>
@@ -116,7 +193,7 @@
            <a href ng-click="removeVlan(vlan)"><i class="icon-remove"></i></a>
          </span>
        </div>
-        <div class="input-append">
+        <div class="input-append has-tooltip" title="#TODO">
          <input class="span2 vlan" id="vlans" type="text" ng-model="newVlan">
          <button class="btn" type="button" ng-click="addVlan(newVlan)">Add</button>
        </div>

--- a/firewall_gui/static/partials/vlangroup-edit.html
+++ b/firewall_gui/static/partials/vlangroup-edit.html
@@ -3,32 +3,64 @@
    <div class="control-group">
      <label class="control-label" for="ID">ID</label>
      <div class="controls">
-        <input class="input-mini" type="text" id="ID" placeholder="ID" value="{{entity.id}}" disabled="disabled">
+        <span class="has-tooltip" title="Built in ID, do not change this">
+          <input
+          class="input-mini"
+          type="text"
+          id="ID"
+          placeholder="ID"
+          value="{{entity.id}}"
+          disabled="disabled" />
+        </span>
      </div>
    </div>
    <div class="control-group">
      <label class="control-label" for="created_at">Created at</label>
      <div class="controls">
-        <input class="input" type="text" id="created_at" ng-model="entity.created_at" disabled="disabled">
+        <span class="has-tooltip" title="The entity was created at this date">
+          <input
+            class="input"
+            type="text"
+            id="created_at"
+            ng-model="entity.created_at"
+            disabled="disabled" />
+        </span>
      </div>
    </div>
    <div class="control-group">
      <label class="control-label" for="modified_at">Modified at</label>
      <div class="controls">
-        <input class="input" type="text" id="modified_at" ng-model="entity.modified_at" disabled="disabled">
+        <span class="has-tooltip" title="The entity was last modified at this date">
+          <input
+            class="input"
+            type="text"
+            id="modified_at"
+            ng-model="entity.modified_at"
+            disabled="disabled" />
+        </span>
      </div>
    </div>
    <div class="control-group" ng-class="hasError('name')">
      <label class="control-label" for="name">Name</label>
      <div class="controls">
-        <input type="text" id="name" ng-model="entity.name" />
+        <input
+          type="text"
+          id="name"
+          ng-model="entity.name"
+          title="Name for this Vlangroup" />
        <span class="help-inline" ng-bind="getError('name')"></span>
      </div>
    </div>
    <div class="control-group" ng-class="hasError('owner')">
      <label class="control-label" for="owner">Owner</label>
      <div class="controls">
-        <input type="text" class="owner" autocomplete="off" id="owner" ng-model="entity.owner.name" />
+        <input
+          type="text"
+          class="owner"
+          autocomplete="off"
+          id="owner"
+          ng-model="entity.owner.name"
+          title="Owners name" />
        <span class="help-inline" ng-bind="getError('owner')"></span>
      </div>
    </div>
@@ -37,7 +69,10 @@
    <div class="control-group" ng-class="hasError('description')">
      <label class="control-label" for="description">Description</label>
      <div class="controls">
-        <textarea rows="2" id="description" ng-model="entity.description">
+        <textarea id="description"
+          rows="2"
+          ng-model="entity.description"
+          title="Short description">
        </textarea>
        <span class="help-inline" ng-bind="getError('description')"></span>
      </div>
@@ -51,8 +86,12 @@
            <a href ng-click="removeVlan(vlan)"><i class="icon-remove"></i></a>
          </span>
        </div>
-        <div class="input-append">
+        <div class="input-append has-tooltip" title="Vlan members of this group">
-          <input class="span2 vlan" id="vlans" type="text" data-provide="typeahead" ng-model="newVlan">
+          <input
+            class="span2 vlan"
+            id="vlans"
+            type="text"
+            ng-model="newVlan">
          <button class="btn" type="button" ng-click="addVlan(newVlan)">Add</button>
        </div>
        <span class="help-inline" ng-bind="getError('vlans')"></span>