From fef6cedab0a33554fdaaa49fcd473d20c3508240 Mon Sep 17 00:00:00 2001
From: Daniel Molina <dmolina@opennebula.org>
Date: Thu, 9 Jul 2015 18:19:43 +0200
Subject: [PATCH] Fix tips performance in template form panel

---
 .../create/wizard-tabs/context/html.hbs       |  26 +--
 .../general/capacity-inputs/html.hbs          |  18 +--
 .../create/wizard-tabs/general/html.hbs       |  16 +-
 .../form-panels/create/wizard-tabs/hybrid.js  |   8 +-
 .../create/wizard-tabs/io/html.hbs            |  16 +-
 .../create/wizard-tabs/network/html.hbs       |   4 +-
 .../wizard-tabs/network/nic-tab/html.hbs      |  56 +++----
 .../create/wizard-tabs/os/html.hbs            |  48 +++---
 .../create/wizard-tabs/other/html.hbs         |   6 +-
 .../create/wizard-tabs/scheduling/html.hbs    |  30 ++--
 .../wizard-tabs/storage/disk-tab/html.hbs     | 152 ++++--------------
 .../public/app/templates/helpers/tip.js       |  12 ++
 src/sunstone/public/app/utils/tips.js         |  13 +-
 13 files changed, 131 insertions(+), 274 deletions(-)
 create mode 100644 src/sunstone/public/app/templates/helpers/tip.js

diff --git a/src/sunstone/public/app/tabs/templates-tab/form-panels/create/wizard-tabs/context/html.hbs b/src/sunstone/public/app/tabs/templates-tab/form-panels/create/wizard-tabs/context/html.hbs
index aa39dbc5f9..58d6ef048e 100644
--- a/src/sunstone/public/app/tabs/templates-tab/form-panels/create/wizard-tabs/context/html.hbs
+++ b/src/sunstone/public/app/tabs/templates-tab/form-panels/create/wizard-tabs/context/html.hbs
@@ -19,9 +19,7 @@
         <input type="checkbox" name="ssh_context" id="ssh_context" checked>
         <label for="ssh_context">
           {{tr "  Add SSH contextualization"}}
-          <span class="tip">
-            {{tr "Add an ssh public key to the context. If the Public Key textarea is empty then the user variable SSH_PUBLIC_KEY will be used."}}
-          </span>
+          {{{tip (tr "Add an ssh public key to the context. If the Public Key textarea is empty then the user variable SSH_PUBLIC_KEY will be used.")}}}
         </label>
       </div>
     </div>
@@ -37,9 +35,7 @@
         <input type="checkbox" name="network_context" id="network_context" checked>
         <label class="inline" for="network_context">
           {{tr "  Add Network contextualization"}}
-          <span class="tip">
-            {{tr "Add network contextualization parameters. For each NIC defined in the NETWORK section, ETH$i_IP, ETH$i_NETWORK... parameters will be included in the CONTEXT section and will be available in the Virtual Machine"}}
-          </span>
+          {{{tip (tr "Add network contextualization parameters. For each NIC defined in the NETWORK section, ETH$i_IP, ETH$i_NETWORK... parameters will be included in the CONTEXT section and will be available in the Virtual Machine")}}}
         </label>
       </div>
     </div>
@@ -48,9 +44,7 @@
         <input type="checkbox" name="token_context" id="token_context">
         <label class="inline" for="token_context">
           {{tr "  Add OneGate token"}}
-          <span class="tip">
-            {{tr "Add a file (token.txt) to the context contaning the token to push custom metrics to the VirtualMachine through OneGate"}}
-          </span>
+          {{{tip (tr "Add a file (token.txt) to the context contaning the token to push custom metrics to the VirtualMachine through OneGate")}}}
         </label>
       </div>
     </div>
@@ -61,9 +55,7 @@
       <div class="large-12 columns">
         <label for="FILES_DS">
           {{tr "FILES_DS"}}
-          <span class="tip">
-            {{tr "Raw String for the FILE_DS attribute of the VM template, representing files that will be included in the contextualization image. Each file must be stored in a FILE_DS Datastore and must be of type CONTEXT"}}
-          </span>
+          {{{tip (tr "Raw String for the FILE_DS attribute of the VM template, representing files that will be included in the contextualization image. Each file must be stored in a FILE_DS Datastore and must be of type CONTEXT")}}}
         </label>
         <input type="text" wizard_field="FILES_DS" id="FILES_DS" name="FILES_DS" />
       </div>
@@ -72,9 +64,7 @@
       <div class="large-12 columns">
         <label for="INIT_SCRIPTS">
           {{tr "Init scripts"}}
-          <span class="tip">
-            {{tr "If the VM uses the OpenNebula contextualization package the init.sh file is executed by default. When the init script added is not called init.sh or more than one init script is added, this list contains the scripts to run and the order. Ex. “init.sh users.sh mysql.sh”"}}
-          </span>
+          {{{tip (tr "If the VM uses the OpenNebula contextualization package the init.sh file is executed by default. When the init script added is not called init.sh or more than one init script is added, this list contains the scripts to run and the order. Ex. “init.sh users.sh mysql.sh”")}}}
         </label>
         <input type="text" wizard_field="FILES_DS" id="INIT_SCRIPTS" name="INIT_SCRIPTS" />
       </div>
@@ -90,9 +80,7 @@
           <thead>
             <tr>
               <th colspan="4" style="font-size: 16px !important"> <i class="fa fa-lg fa-fw fa-cogs off-color"/>{{tr "User Inputs"}}
-                <span class="tip">
-                  {{tr "These attributes must be provided by the user when a new VM is intantatiated using each template. They will be included in the VM context"}}
-                </span>
+                {{{tip (tr "These attributes must be provided by the user when a new VM is intantatiated using each template. They will be included in the VM context")}}}
               </th>
             </tr>
           </thead>
@@ -119,4 +107,4 @@
       </div>
     </div>
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/sunstone/public/app/tabs/templates-tab/form-panels/create/wizard-tabs/general/capacity-inputs/html.hbs b/src/sunstone/public/app/tabs/templates-tab/form-panels/create/wizard-tabs/general/capacity-inputs/html.hbs
index 9ab32f6d3e..e2e94fabd8 100644
--- a/src/sunstone/public/app/tabs/templates-tab/form-panels/create/wizard-tabs/general/capacity-inputs/html.hbs
+++ b/src/sunstone/public/app/tabs/templates-tab/form-panels/create/wizard-tabs/general/capacity-inputs/html.hbs
@@ -5,8 +5,7 @@
   <div class="large-7 columns">
     <label class="" for="MEMORY">
       {{tr "Memory"}}
-      <span class="tip ">{{tr "Amount of RAM required for the VM, in Megabytes."}}</span>
-
+      {{{tip (tr "Amount of RAM required for the VM, in Megabytes.")}}}
     </label>
     <div class="large-8 columns">
       <div id="memory_slider" class="large-7 columns"></div>
@@ -25,7 +24,7 @@
   <div class="large-2 columns">
     <label  for="MEMORY_COST">
       {{tr "Cost"}}
-      <span class="tip">{{tr "Cost of each MB per hour"}}</span>
+      {{{tip (tr "Cost of each MB per hour")}}}
     </label>
     <input type="text" wizard_field="MEMORY_COST" id="MEMORY_COST" name="name"/>
   </div>
@@ -36,9 +35,7 @@
   <div class="large-7 columns">
     <label class="" for="CPU">
       {{tr "CPU"}}
-      <span class="tip">
-        {{tr "Percentage of CPU divided by 100 required for the Virtual Machine. Half a processor is written 0.5."}}
-      </span>
+      {{{tip (tr "Percentage of CPU divided by 100 required for the Virtual Machine. Half a processor is written 0.5.")}}}
     </label>
     <div class="large-10 columns">
       <div id="cpu_slider"></div>
@@ -51,8 +48,7 @@
   <div class="large-2 columns">
     <label  for="CPU_COST">
       {{tr "Cost"}}
-      <span class="tip">{{tr "Cost of each CPU per hour"}}</span>
-
+      {{{tip (tr "Cost of each CPU per hour")}}}
     </label>
     <input type="text" wizard_field="CPU_COST" id="CPU_COST" name="name"/>
   </div>
@@ -63,9 +59,7 @@
   <div class="large-7 columns">
     <label class="" for="VCPU">
       {{tr "VCPU"}}
-      <span class="tip">
-        {{tr "Number of virtual cpus. This value is optional, the default hypervisor behavior is used, usually one virtual CPU."}}
-      </span>
+      {{{tip (tr "Number of virtual cpus. This value is optional, the default hypervisor behavior is used, usually one virtual CPU.")}}}
     </label>
     <div class="large-10 columns">
       <div id="vcpu_slider"></div>
@@ -75,4 +69,4 @@
     </div>
   </div>
   <div class="large-5 columns"></div>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/sunstone/public/app/tabs/templates-tab/form-panels/create/wizard-tabs/general/html.hbs b/src/sunstone/public/app/tabs/templates-tab/form-panels/create/wizard-tabs/general/html.hbs
index 85f5258315..05a9fcf2cc 100644
--- a/src/sunstone/public/app/tabs/templates-tab/form-panels/create/wizard-tabs/general/html.hbs
+++ b/src/sunstone/public/app/tabs/templates-tab/form-panels/create/wizard-tabs/general/html.hbs
@@ -2,7 +2,7 @@
   <div id="template_name_form"  class="large-6 columns">
     <label  for="NAME">
       {{tr "Name"}}
-      <span class="tip">{{tr "Name that the VM will get for description purposes."}}</span>
+      {{{tip (tr "Name that the VM will get for description purposes.")}}}
       <input type="text" wizard_field="NAME" id="NAME" name="name" required/>
     </label>
   </div>
@@ -22,7 +22,7 @@
   <div class="large-6 columns">
     <label  for="DESCRIPTION">
       {{tr "Description"}}
-      <span class="tip">{{tr "Description of the template"}}</span>
+      {{{tip (tr "Description of the template")}}}
     </label>
     <textarea type="text" wizard_field="DESCRIPTION" id="DESCRIPTION" name="DESCRIPTION" style="height: 70px;"/>
   </div>
@@ -31,7 +31,7 @@
       <div class="large-6 columns">
         <label  for="LOGO">
           {{tr "Logo"}}
-          <span class="tip">{{tr "Logo for the template."}}</span>
+          {{{tip (tr "Logo for the template.")}}}
         </label>
         <select wizard_field="LOGO" id="LOGO" name="LOGO">
           <option value=""></option>
@@ -59,9 +59,7 @@
     <input type="checkbox" id="sunstone_capacity_select" name="name"/>
     <label  for="sunstone_capacity_select">
       {{tr "Do not allow to change capacity"}}
-      <span class="tip">
-        {{tr "Users using the cloud view will not be able to select a new capacity for this template"}}
-      </span>
+      {{{tip (tr "Users using the cloud view will not be able to select a new capacity for this template")}}}
     </label>
   </div>
 </div>
@@ -70,9 +68,7 @@
     <input type="checkbox" id="sunstone_network_select" name="name"/>
     <label  for="sunstone_network_select">
       {{tr "Do not allow to modify network configuration"}}
-      <span class="tip">
-        {{tr "Users using the cloud view will not be able to remove or add new NICs"}}
-      </span>
+      {{{tip (tr "Users using the cloud view will not be able to remove or add new NICs")}}}
     </label>
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/sunstone/public/app/tabs/templates-tab/form-panels/create/wizard-tabs/hybrid.js b/src/sunstone/public/app/tabs/templates-tab/form-panels/create/wizard-tabs/hybrid.js
index ed401c92ea..d83abff038 100644
--- a/src/sunstone/public/app/tabs/templates-tab/form-panels/create/wizard-tabs/hybrid.js
+++ b/src/sunstone/public/app/tabs/templates-tab/form-panels/create/wizard-tabs/hybrid.js
@@ -490,9 +490,7 @@ define(function(require) {
             required_str += '<div class="large-6 columns">' +
               '<label>' +
                 obj.label +
-                '<span class="tip">' +
-                  obj.tooltip +
-                '</span>' +
+                Tips.html(obj.tooltip) +
               '</label>' +
               '<input wizard_field="' + obj.name + '" type="text" id="' + obj.name + '">' +
             '</div>'
@@ -500,9 +498,7 @@ define(function(require) {
             not_required_str += '<div class="large-6 columns">' +
               '<label>' +
                 obj.label +
-                '<span class="tip">' +
-                  obj.tooltip +
-                '</span>' +
+                Tips.html(obj.tooltip) +
               '</label>' +
               '<input wizard_field="' + obj.name + '" type="text" id="' + obj.name + '">' +
             '</div>'
diff --git a/src/sunstone/public/app/tabs/templates-tab/form-panels/create/wizard-tabs/io/html.hbs b/src/sunstone/public/app/tabs/templates-tab/form-panels/create/wizard-tabs/io/html.hbs
index fb5dc4a3ed..64871c128b 100644
--- a/src/sunstone/public/app/tabs/templates-tab/form-panels/create/wizard-tabs/io/html.hbs
+++ b/src/sunstone/public/app/tabs/templates-tab/form-panels/create/wizard-tabs/io/html.hbs
@@ -18,7 +18,7 @@
         <div class="large-12 columns">
           <label for="LISTEN">
             {{tr "Listen IP"}}
-            <span class="tip">{{tr "IP to listen on"}}</span>
+            {{{tip (tr "IP to listen on")}}}
           </label>
           <input type="text" wizard_field="LISTEN" id="LISTEN" name="graphics_ip" />
         </div>
@@ -27,16 +27,14 @@
         <div class="large-6 columns">
           <label for="PORT">
             {{tr "Port"}}
-            <span class="tip">{{tr "Port for the VNC/SPICE server"}}</span>
+            {{{tip (tr "Port for the VNC/SPICE server")}}}
           </label>
           <input type="text" wizard_field="PORT" id="PORT" name="port" />
         </div>
         <div class="large-6 columns">
           <label for="KEYMAP">
             {{tr "Keymap"}}
-            <span class="tip">
-              {{tr "Keyboard configuration locale to use in the VNC/SPICE display"}}
-            </span>
+            {{{tip (tr "Keyboard configuration locale to use in the VNC/SPICE display")}}}
           </label>
           <input type="text" wizard_field="KEYMAP" id="KEYMAP" name="keymap" />
         </div>
@@ -45,7 +43,7 @@
         <div class="large-12 columns">
           <label for="PASSWD">
             {{tr "Password"}}
-            <span class="tip">{{tr "Password for the VNC/SPICE server"}}</span>
+            {{{tip (tr "Password for the VNC/SPICE server")}}}
           </label>
           <input type="text" wizard_field="PASSWD" id="PASSWD" name="graphics_pw" />
         </div>
@@ -55,9 +53,7 @@
           <input type="checkbox" name="RANDOM_PASSWD" id="RANDOM_PASSWD">
           <label for="RANDOM_PASSWD">
             {{tr "Generate Random Password"}}
-            <span class="tip">
-              {{tr "A random password will be generated for each VM, and will be included in the VM information"}}
-            </span>
+            {{{tip (tr "A random password will be generated for each VM, and will be included in the VM information")}}}
           </label>
         </div>
       </div>
@@ -105,4 +101,4 @@
       </div>
     </fieldset>
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/sunstone/public/app/tabs/templates-tab/form-panels/create/wizard-tabs/network/html.hbs b/src/sunstone/public/app/tabs/templates-tab/form-panels/create/wizard-tabs/network/html.hbs
index d3ac4583a5..eda770cab5 100644
--- a/src/sunstone/public/app/tabs/templates-tab/form-panels/create/wizard-tabs/network/html.hbs
+++ b/src/sunstone/public/app/tabs/templates-tab/form-panels/create/wizard-tabs/network/html.hbs
@@ -11,9 +11,7 @@
   <div class="large-6 columns">
     <label for="DEFAULT_MODEL">
       {{tr "Default model"}}
-      <span class="tip">
-        {{tr "Default value for all NICs. Hardware that will emulate the network interface. With Xen this is the type attribute of the vif."}}
-      </span>
+      {{{tip (tr "Default value for all NICs. Hardware that will emulate the network interface. With Xen this is the type attribute of the vif.")}}}
     </label>
     <input type="text" id="DEFAULT_MODEL" name="DEFAULT_MODEL"/>
   </div>
diff --git a/src/sunstone/public/app/tabs/templates-tab/form-panels/create/wizard-tabs/network/nic-tab/html.hbs b/src/sunstone/public/app/tabs/templates-tab/form-panels/create/wizard-tabs/network/nic-tab/html.hbs
index 84c0965eea..db8d8c0df9 100644
--- a/src/sunstone/public/app/tabs/templates-tab/form-panels/create/wizard-tabs/network/nic-tab/html.hbs
+++ b/src/sunstone/public/app/tabs/templates-tab/form-panels/create/wizard-tabs/network/nic-tab/html.hbs
@@ -8,18 +8,14 @@
       <div class="large-6 columns">
         <label for="NETWORK_ID">
           {{tr "ID"}}
-          <span class="tip">
-            {{tr "Identifier of the virtual network from which to lease an IP and MAC address to this Virtual Machine network interface."}}
-          </span>
+          {{{tip (tr "Identifier of the virtual network from which to lease an IP and MAC address to this Virtual Machine network interface.")}}}
         </label>
         <input type="text" wizard_field="NETWORK_ID" id="NETWORK_ID" name="NETWORK_ID"/>
       </div>
       <div class="large-6 columns">
         <label for="NETWORK">
           {{tr "Name"}}
-          <span class="tip">
-            {{tr "Name of the virtual network from which to lease an IP and MAC address to this Virtual Machine network interface."}}
-          </span>
+          {{{tip (tr "Name of the virtual network from which to lease an IP and MAC address to this Virtual Machine network interface.")}}}
         </label>
         <input type="text" wizard_field="NETWORK" id="NETWORK" name="NETWORK" />
       </div>
@@ -28,18 +24,14 @@
       <div class="large-6 columns">
         <label for="NETWORK_UID">
           {{tr "User ID"}}
-          <span class="tip">
-            {{tr "Identifier of the user owner of the virtual network from which to lease an IP and MAC address to this Virtual Machine network interface."}}
-          </span>
+          {{{tip (tr "Identifier of the user owner of the virtual network from which to lease an IP and MAC address to this Virtual Machine network interface.")}}}
         </label>
         <input type="text" wizard_field="NETWORK_UID" id="NETWORK_UID" name="NETWORK_UID"/>
       </div>
       <div class="large-6 columns">
         <label for="NETWORK_UNAME">
           {{tr "User Name"}}
-          <span class="tip">
-            {{tr "Name of the user owner of the virtual network from which to lease an IP and MAC address to this Virtual Machine network interface."}}
-          </span>
+          {{{tip (tr "Name of the user owner of the virtual network from which to lease an IP and MAC address to this Virtual Machine network interface.")}}}
         </label>
         <input type="text" wizard_field="NETWORK_UNAME" id="NETWORK_UNAME" name="NETWORK_UNAME"/>
       </div>
@@ -51,14 +43,14 @@
       <div class="large-6 columns">
         <label for="IP">
           {{tr "IP"}}
-          <span class="tip">{{tr "Request an specific IP from the Network"}}</span>
+          {{{tip (tr "Request an specific IP from the Network")}}}
         </label>
         <input type="text" wizard_field="IP" id="IP" name="IP" size="3" />
       </div>
       <div class="large-6 columns">
         <label for="MAC">
           {{tr "MAC"}}
-          <span class="tip">{{tr "Set a specific MAC to the NIC"}}</span>
+          {{{tip (tr "Set a specific MAC to the NIC")}}}
         </label>
         <input type="text" wizard_field="MAC" id="MAC" name="MAC"/>
       </div>
@@ -67,18 +59,14 @@
       <div class="large-6 columns">
         <label for="NETWORK_MASK">
           {{tr "Network Mask"}}
-          <span class="tip">
-            {{tr "Override the network mask of the network. For example, 255.255.255.0"}}
-          </span>
+          {{{tip (tr "Override the network mask of the network. For example, 255.255.255.0")}}}
         </label>
         <input type="text" wizard_field="NETWORK_MASK" id="NETWORK_MASK" name="NETWORK_MASK"/>
       </div>
       <div class="large-6 columns">
         <label for="NETWORK_ADDRESS">
           {{tr "Network Address"}}
-          <span class="tip">
-            {{tr "Override the base network address. For example, 192.168.1.0"}}
-          </span>
+          {{{tip (tr "Override the base network address. For example, 192.168.1.0")}}}
         </label>
         <input type="text" wizard_field="NETWORK_ADDRESS" id="NETWORK_ADDRESS" name="NETWORK_ADDRESS"/>
       </div>
@@ -87,14 +75,14 @@
       <div class="large-6 columns">
         <label for="GATEWAY">
           {{tr "Gateway"}}
-          <span class="tip">{{tr "Override the Router of the network."}}</span>
+          {{{tip (tr "Override the Router of the network.")}}}
         </label>
         <input type="text" wizard_field="GATEWAY" id="GATEWAY" name="GATEWAY"/>
       </div>
       <div class="large-6 columns">
         <label for="DNS">
           {{tr "DNS"}}
-          <span class="tip">{{tr "Override the specific DNS for this network"}}</span>
+          {{{tip (tr "Override the specific DNS for this network")}}}
         </label>
         <input type="text" wizard_field="DNS" id="DNS" name="DNS"/>
       </div>
@@ -103,7 +91,7 @@
       <div class="large-6 columns">
         <label for="SEARCH_DOMAIN">
           {{tr "Search Domain"}}
-          <span class="tip">{{tr "Override the Search Domain for this network."}}</span>
+          {{{tip (tr "Override the Search Domain for this network.")}}}
         </label>
         <input type="text" wizard_field="SEARCH_DOMAIN" id="SEARCH_DOMAIN" name="SEARCH_DOMAIN"/>
       </div>
@@ -115,14 +103,14 @@
       <div class="large-6 columns">
         <label for="IP6_GLOBAL">
           {{tr "IP6 Global"}}
-          <span class="tip">{{tr "Request an specific IP from the IPv6 Network"}}</span>
+          {{{tip (tr "Request an specific IP from the IPv6 Network")}}}
         </label>
         <input type="text" wizard_field="IP6_GLOBAL" id="IP6_GLOBAL" name="IP6_GLOBAL" size="3" />
       </div>
       <div class="large-6 columns">
         <label for="GATEWAY6">
           {{tr "GATEWAY6"}}
-          <span class="tip">{{tr "Override the Router of the IPv6 network."}}</span>
+          {{{tip (tr "Override the Router of the IPv6 network.")}}}
         </label>
         <input type="text" wizard_field="GATEWAY6" id="GATEWAY6" name="GATEWAY6"/>
       </div>
@@ -131,9 +119,7 @@
       <div class="large-6 columns">
         <label for="CONTEXT_FORCE_IPV4">
           {{tr "Network Mask"}}
-          <span class="tip">
-            {{tr "Override force IPv4 for this IPv6 network. Values: Yes or No."}}
-          </span>
+          {{{tip (tr "Override force IPv4 for this IPv6 network. Values: Yes or No.")}}}
         </label>
         <input type="text" wizard_field="CONTEXT_FORCE_IPV4" id="CONTEXT_FORCE_IPV4" name="CONTEXT_FORCE_IPV4"/>
       </div>
@@ -145,9 +131,7 @@
       <div class="large-6 columns">
         <label for="MODEL">
           {{tr "Model"}}
-          <span class="tip">
-            {{tr "Hardware that will emulate this network interface. With Xen this is the type attribute of the vif."}}
-          </span>
+          {{{tip (tr "Hardware that will emulate this network interface. With Xen this is the type attribute of the vif.")}}}
         </label>
         <input type="text" wizard_field="MODEL" id="MODEL" name="MODEL" />
       </div>
@@ -178,9 +162,7 @@
         <div class="large-12 columns">
           <label for="TCP_PORTS">
             {{tr "PORTS"}}
-            <span class="tip">
-              {{tr "A list of ports separated by commas or a ranges separated by semicolons, e.g.: 22,80,5900:6000"}}
-            </span>
+            {{{tip (tr "A list of ports separated by commas or a ranges separated by semicolons, e.g.: 22,80,5900:6000")}}}
           </label>
           <input type="text" id="TCP_PORTS" name="ports" />
         </div>
@@ -200,9 +182,7 @@
         <div class="large-12 columns">
           <label for="UDP_PORTS">
             {{tr "PORTS"}}
-            <span class="tip">
-              {{tr "A list of ports separated by commas or a ranges separated by semicolons, e.g.: 22,80,5900:6000"}}
-            </span>
+            {{{tip (tr "A list of ports separated by commas or a ranges separated by semicolons, e.g.: 22,80,5900:6000")}}}
           </label>
           <input type="text" id="UDP_PORTS" name="ports" />
         </div>
@@ -219,4 +199,4 @@
     </fieldset>
   </div>
   {{/advancedSection}}
-</div>
\ No newline at end of file
+</div>
diff --git a/src/sunstone/public/app/tabs/templates-tab/form-panels/create/wizard-tabs/os/html.hbs b/src/sunstone/public/app/tabs/templates-tab/form-panels/create/wizard-tabs/os/html.hbs
index 7da84d9df0..b5575f81c1 100644
--- a/src/sunstone/public/app/tabs/templates-tab/form-panels/create/wizard-tabs/os/html.hbs
+++ b/src/sunstone/public/app/tabs/templates-tab/form-panels/create/wizard-tabs/os/html.hbs
@@ -19,7 +19,7 @@
         <div class="large-4 columns">
           <label for="ARCH">
             {{tr "Arch"}}
-            <span class="tip">{{tr "CPU architecture to virtualization"}}</span>
+            {{{tip (tr "CPU architecture to virtualization")}}}
           </label>
           <select wizard_field="ARCH" id="ARCH" name="arch">
             <option id="no_arch" name="no_arch" value=""></option>
@@ -30,7 +30,7 @@
         <div class="large-8 columns hypervisor only_kvm">
           <label for="MACHINE">
             {{tr "Machine type"}}
-            <span class="tip">{{tr "libvirt machine type, only for KVM"}}</span>
+            {{{tip (tr "libvirt machine type, only for KVM")}}}
           </label>
           <input type="text" wizard_field="MACHINE" id="MACHINE" name="machine" />
         </div>
@@ -39,14 +39,14 @@
         <div class="large-4 columns">
           <label for="ROOT">
             {{tr "Root"}}
-            <span class="tip">{{tr "Device to be mounted as root"}}</span>
+            {{{tip (tr "Device to be mounted as root")}}}
           </label>
           <input type="text" wizard_field="ROOT" id="ROOT" name="root"/>
         </div>
         <div class="large-8 columns hypervisor only_vmware">
           <label for="GUESTOS">
             {{tr "Guest OS"}}
-            <span class="tip">{{tr "Set the OS of the VM, only for VMware"}}</span>
+            {{{tip (tr "Set the OS of the VM, only for VMware")}}}
           </label>
           <select wizard_field="GUESTOS" id="GUESTOS" name="GUESTOS">
             <option id="no_guestos" name="no_guestos" value=""></option>
@@ -61,7 +61,7 @@
         <div class="large-4 columns">
           <label for="BOOT_0">
             {{tr "1st Boot"}}
-            <span class="tip">{{tr "1st Boot device type"}}</span>
+            {{{tip (tr "1st Boot device type")}}}
           </label>
           <select id="BOOT_0" name="boot">
             <option id="no_boot" name="no_boot" value=""></option>
@@ -74,7 +74,7 @@
         <div class="large-4 columns">
           <label for="BOOT_1">
             {{tr "2nd Boot"}}
-            <span class="tip">{{tr "2nd Boot device type"}}</span>
+            {{{tip (tr "2nd Boot device type")}}}
           </label>
           <select id="BOOT_1" name="boot">
             <option id="no_boot" name="no_boot" value=""></option>
@@ -87,7 +87,7 @@
         <div class="large-4 columns">
           <label for="BOOT_2">
             {{tr "3rd Boot"}}
-            <span class="tip">{{tr "3rd Boot device type"}}</span>
+            {{{tip (tr "3rd Boot device type")}}}
           </label>
           <select id="BOOT_2" name="boot">
             <option id="no_boot" name="no_boot" value=""></option>
@@ -102,7 +102,7 @@
         <div class="large-12 columns">
           <label for="KERNEL_CMD">
             {{tr "Kernel cmd"}}
-            <span class="tip">{{tr "Arguments for the booting kernel"}}</span>
+            {{{tip (tr "Arguments for the booting kernel")}}}
           </label>
           <input type="text" wizard_field="KERNEL_CMD" id="KERNEL_CMD" name="kernel_cmd" />
         </div>
@@ -111,7 +111,7 @@
         <div class="large-12 columns">
           <label for="BOOTLOADER">
             {{tr "Bootloader"}}
-            <span class="tip">{{tr "Path to the bootloader executable"}}</span>
+            {{{tip (tr "Path to the bootloader executable")}}}
           </label>
           <input type="text" wizard_field="BOOTLOADER" id="BOOTLOADER" name="bootloader" />
         </div>
@@ -140,7 +140,7 @@
         <div class="large-12 columns">
           <label for="KERNEL">
             {{tr "PATH"}}
-            <span class="tip">{{tr "Path to the OS kernel to boot the image"}}</span>
+            {{{tip (tr "Path to the OS kernel to boot the image")}}}
           </label>
           <input type="text" wizard_field="KERNEL" id="KERNEL" name="kernel" />
         </div>
@@ -170,7 +170,7 @@
           <div class="large-12 columns">
             <label for="INITRD">
               {{tr "PATH"}}
-              <span class="tip">{{tr "Path to the initrd image"}}</span>
+              {{{tip (tr "Path to the initrd image")}}}
             </label>
             <input type="text" wizard_field="INITRD" id="INITRD" name="initrd"/>
           </div>
@@ -182,9 +182,7 @@
         <div class="large-6 columns">
           <label for="ACPI">
             {{tr "ACPI"}}
-            <span class="tip">
-              {{tr "Add support in the VM for Advanced Configuration and Power Interface (ACPI)"}}
-            </span>
+            {{{tip (tr "Add support in the VM for Advanced Configuration and Power Interface (ACPI)")}}}
           </label>
           <select wizard_field="ACPI" id="ACPI" name="acpi">
             <option id="no_apci" name="no_apci" value=""></option>
@@ -195,9 +193,7 @@
         <div class="large-6 columns">
           <label for="PAE">
             {{tr "PAE"}}
-            <span class="tip">
-              {{tr "Add support in the VM for Physical Address Extension (PAE)"}}
-            </span>
+            {{{tip (tr "Add support in the VM for Physical Address Extension (PAE)")}}}
           </label>
           <select wizard_field="PAE" id="PAE" name="pae">
             <option id="no_pae" name="no_pae" value=""></option>
@@ -210,7 +206,7 @@
         <div class="large-6 columns">
           <label for="APIC">
             {{tr "APIC"}}
-            <span class="tip">{{tr "Enables the advanced programmable IRQ management."}}</span>
+            {{{tip (tr "Enables the advanced programmable IRQ management.")}}}
           </label>
           <select wizard_field="APIC" id="APIC" name="apic">
             <option id="no_apic" name="no_apic" value=""></option>
@@ -221,7 +217,7 @@
         <div class="large-6 columns">
           <label for="HYPERV">
             {{tr "HYPERV"}}
-            <span class="tip">{{tr "Add support in the VM for hyper-v features (HYPERV)"}}</span>
+            {{{tip (tr "Add support in the VM for hyper-v features (HYPERV)")}}}
           </label>
           <select wizard_field="HYPERV" id="HYPERV" name="hyperv">
             <option id="no_hyperv" name="no_hyperv" value=""></option>
@@ -234,9 +230,7 @@
         <div class="large-6 columns">
           <label for="LOCALTIME">
             {{tr "Localtime"}}
-            <span class="tip">
-              {{tr "The guest clock will be synchronized to the hosts configured timezone when booted."}}
-            </span>
+            {{{tip (tr "The guest clock will be synchronized to the hosts configured timezone when booted.")}}}
           </label>
           <select wizard_field="LOCALTIME" id="LOCALTIME" name="localtime">
             <option id="no_localtime" name="no_localtime" value=""></option>
@@ -247,9 +241,7 @@
         <div class="large-6 columns hypervisor only_xen">
           <label for="DEVICE_MODEL">
             {{tr "Device model"}}
-            <span class="tip">
-              {{tr "Used to change the IO emulator in Xen HVM. Only XEN."}}
-            </span>
+            {{{tip (tr "Used to change the IO emulator in Xen HVM. Only XEN.")}}}
           </label>
           <input type="text" wizard_field="DEVICE_MODEL" id="DEVICE_MODEL" name="device_model"/>
         </div>
@@ -258,9 +250,7 @@
         <div class="large-6 columns hypervisor only_vmware">
           <label for="PCIBRIDGE">
             {{tr "PCI BRIDGE"}}
-            <span class="tip">
-              {{tr " Adds a PCI Controller that provides bridge-to-bridge capability, only for VMware."}}
-            </span>
+            {{{tip (tr " Adds a PCI Controller that provides bridge-to-bridge capability, only for VMware.")}}}
           </label>
           <select wizard_field="PCIBRIDGE" id="PCIBRIDGE" name="PCIBRIDGE">
             <option id="no_pcibridge" name="no_pcibridge" value=""></option>
@@ -280,4 +270,4 @@
       </div>
     </div>
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/sunstone/public/app/tabs/templates-tab/form-panels/create/wizard-tabs/other/html.hbs b/src/sunstone/public/app/tabs/templates-tab/form-panels/create/wizard-tabs/other/html.hbs
index ca71868544..3015ced0af 100644
--- a/src/sunstone/public/app/tabs/templates-tab/form-panels/create/wizard-tabs/other/html.hbs
+++ b/src/sunstone/public/app/tabs/templates-tab/form-panels/create/wizard-tabs/other/html.hbs
@@ -15,7 +15,7 @@
         <div class="large-8 columns">
           <label class="" for="raw_data">
             {{tr "DATA"}}
-            <span class="tip">{{tr "Raw data to be passed directly to the hypervisor"}}.</span>
+            {{{tip (tr "Raw data to be passed directly to the hypervisor")}}}
           </label>
           <textarea rows="2" type="text" id="raw_data" name="raw_data" />
         </div>
@@ -25,7 +25,7 @@
         <div class="large-8 columns">
           <label class="" for="raw_data_vmx">
             {{tr "DATA_VMX"}}
-            <span class="tip">{{tr "Raw data to be added directly to the .vmx file."}}.</span>
+            {{{tip (tr "Raw data to be added directly to the .vmx file.")}}}
           </label>
           <textarea rows="2" type="text" id="raw_data_vmx" name="raw_data_vmx" />
         </div>
@@ -36,4 +36,4 @@
       {{{customTagsTableHTML}}}
     </fieldset>
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/sunstone/public/app/tabs/templates-tab/form-panels/create/wizard-tabs/scheduling/html.hbs b/src/sunstone/public/app/tabs/templates-tab/form-panels/create/wizard-tabs/scheduling/html.hbs
index efa2233390..6bffb2e2c9 100644
--- a/src/sunstone/public/app/tabs/templates-tab/form-panels/create/wizard-tabs/scheduling/html.hbs
+++ b/src/sunstone/public/app/tabs/templates-tab/form-panels/create/wizard-tabs/scheduling/html.hbs
@@ -30,9 +30,7 @@
         <div class="large-12 columns">
           <label for="SCHED_REQUIREMENTS">
             {{tr "Expression"}}
-            <span class="tip">
-              {{tr "Boolean expression that rules out provisioning hosts from list of machines suitable to run this VM"}}.
-            </span>
+            {{{tip (tr "Boolean expression that rules out provisioning hosts from list of machines suitable to run this VM")}}}
           </label>
           <input type="text" wizard_field="SCHED_REQUIREMENTS" id="SCHED_REQUIREMENTS" name="requirements" />
         </div>
@@ -44,9 +42,7 @@
         <div class="large-12 columns">
           <label for="SCHED_DS_REQUIREMENTS">
             {{tr "Expression"}}
-            <span class="tip">
-              {{tr "Boolean expression that rules out entries from the pool of datastores suitable to run this VM."}}.
-            </span>
+            {{{tip (tr "Boolean expression that rules out entries from the pool of datastores suitable to run this VM.")}}}
           </label>
           <input type="text" wizard_field="SCHED_DS_REQUIREMENTS" id="SCHED_DS_REQUIREMENTS" name="requirements" />
         </div>
@@ -61,19 +57,17 @@
           <input type="radio" id="packingRadio" name="rank_select" value="RUNNING_VMS">
           <label for="packingRadio">
             {{tr "Packing"}}
-            <span class="tip">
-              {{tr "Pack the VMs in the cluster nodes to reduce VM fragmentation"}}
-            </span>
+            {{{tip (tr "Pack the VMs in the cluster nodes to reduce VM fragmentation")}}}
           </label>
           <input type="radio"  id="stripingRadio" name="rank_select" value="-RUNNING_VMS">
           <label for="stripingRadio">
             {{tr "Stripping"}}
-            <span class="tip">{{tr "Spread the VMs in the cluster nodes"}}</span>
+            {{{tip (tr "Spread the VMs in the cluster nodes")}}}
           </label>
           <input type="radio"  id="loadawareRadio" name="rank_select" value="FREE_CPU">
           <label for="loadawareRadio">
             {{tr "Load-aware"}}
-            <span class="tip">{{tr "Maximize the resources available to VMs in a node"}}</span>
+            {{{tip (tr "Maximize the resources available to VMs in a node")}}}
           </label>
         </div>
       </div>
@@ -97,16 +91,12 @@
           <input type="radio" id="packingDSRadio" name="ds_rank_select" value="-FREE_MB">
           <label for="packingDSRadio">
             {{tr "Packing"}}
-            <span class="tip">
-              {{tr "Tries to optimize storage usage by selecting the DS with less free space"}}
-            </span>
+            {{{tip (tr "Tries to optimize storage usage by selecting the DS with less free space")}}}
           </label>
           <input type="radio"  id="stripingDSRadio" name="ds_rank_select" value="FREE_MB">
           <label for="stripingDSRadio">
             {{tr "Stripping"}}
-            <span class="tip">
-              {{tr "Striping. Tries to optimize I/O by distributing the VMs across datastores."}}
-            </span>
+            {{{tip (tr "Striping. Tries to optimize I/O by distributing the VMs across datastores.")}}}
           </label>
         </div>
       </div>
@@ -115,13 +105,11 @@
         <div class="large-12 columns">
           <label for="SCHED_DS_RANK">
             {{tr "Expression"}}
-            <span class="tip">
-              {{tr "This field sets which attribute will be used to sort the suitable datastores for this VM"}}.
-            </span>
+            {{{tip (tr "This field sets which attribute will be used to sort the suitable datastores for this VM")}}}
           </label>
           <input type="text" wizard_field="SCHED_DS_RANK" id="SCHED_DS_RANK" name="RANK" />
         </div>
       </div>
     </fieldset>
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/sunstone/public/app/tabs/templates-tab/form-panels/create/wizard-tabs/storage/disk-tab/html.hbs b/src/sunstone/public/app/tabs/templates-tab/form-panels/create/wizard-tabs/storage/disk-tab/html.hbs
index 9300d24324..cc9c9dfaa8 100644
--- a/src/sunstone/public/app/tabs/templates-tab/form-panels/create/wizard-tabs/storage/disk-tab/html.hbs
+++ b/src/sunstone/public/app/tabs/templates-tab/form-panels/create/wizard-tabs/storage/disk-tab/html.hbs
@@ -16,16 +16,14 @@
       <div class="large-6 columns">
         <label for="IMAGE_ID">
           {{tr "ID"}}
-          <span class="tip">{{tr "Image ID to be used in the Virtual Image disk."}}</span>
+          {{{tip (tr "Image ID to be used in the Virtual Image disk.")}}}
         </label>
         <input type="text" wizard_field="IMAGE_ID" id="IMAGE_ID" name="IMAGE_ID"/>
       </div>
       <div class="large-6 columns">
         <label for="IMAGE">
           {{tr "Name"}}
-          <span class="tip">
-            {{tr "Name of the image to be used in the Virtual Image disk."}}
-          </span>
+          {{{tip (tr "Name of the image to be used in the Virtual Image disk.")}}}
         </label>
         <input type="text" wizard_field="IMAGE" id="IMAGE" name="IMAGE"/>
       </div>
@@ -34,18 +32,14 @@
       <div class="large-6 columns">
         <label for="IMAGE_UID">
           {{tr "User ID"}}
-          <span class="tip">
-            {{tr "Identifier of the user owner of the image to reduce ambiguity."}}
-          </span>
+          {{{tip (tr "Identifier of the user owner of the image to reduce ambiguity.")}}}
         </label>
         <input type="text" wizard_field="IMAGE_UID" id="IMAGE_UID" name="IMAGE_UID"/>
       </div>
       <div class="large-6 columns">
         <label for="IMAGE_UNAME">
           {{tr "User Name"}}
-          <span class="tip">
-            {{tr "Name of the user owner of the image to reduce ambiguity."}}
-          </span>
+          {{{tip (tr "Name of the user owner of the image to reduce ambiguity.")}}}
         </label>
         <input type="text" wizard_field="IMAGE_UNAME" id="IMAGE_UNAME" name="IMAGE_UNAME"/>
       </div>
@@ -55,28 +49,14 @@
     <div class="large-6 columns">
       <label for="TARGET">
         {{tr "Target"}}
-        <span class="tip">
-          {{tr "Device to map image disk. If set, it will overwrite the default device mapping"}}
-          <br>
-          <br>
-          {{tr "Xen: Optional"}}
-          <br>
-          {{tr "KVM: Optional"}}
-          <br>{{tr "VMWare: Optional"}}</span>
+        {{{tip (tr "Device to map image disk. If set, it will overwrite the default device mapping. Xen: Optional. KVM: Optional. VMWare: Optional")}}}
       </label>
       <input type="text" wizard_field="TARGET" id="TARGET" name="target"/>
     </div>
     <div class="large-6 columns hypervisor only_xen only_kvm">
       <label for="DRIVER">
         {{tr "Driver"}}
-        <span class="tip">
-          {{tr "Specific image mapping driver"}}
-          <br>
-          <br>
-          {{tr "Xen: Optional (tap:aio:, file:)"}}
-          <br>
-          {{tr "KVM: Optional (raw, qcow2)"}}
-          <br>{{tr "VMWare: Not supported"}}</span>
+        {{{tip (tr "Specific image mapping driver. Xen: Optional (tap:aio:, file:). KVM: Optional (raw, qcow2). VMWare: Not supported")}}}
       </label>
       <input type="text" wizard_field="DRIVER" id="DRIVER" name="driver" />
     </div>
@@ -85,28 +65,14 @@
     <div class="large-6 columns">
       <label for="DEV_PREFIX">
         {{tr "Device Prefix"}}
-        <span class="tip">
-          {{tr "Prefix for the emulated device this image will be mounted at. For instance, “hd”, “sd”, or “vd” for KVM virtio. If omitted, the dev_prefix attribute of the Image will be used"}}
-          <br>
-          <br>
-          {{tr "Xen: Optional"}}
-          <br>
-          {{tr "KVM: Optional"}}
-          <br>{{tr "VMWare: Optional"}}</span>
+        {{{tip (tr "Prefix for the emulated device this image will be mounted at. For instance, hd, sd, or vd for KVM virtio. If omitted, the dev_prefix attribute of the Image will be used. Xen: Optional. KVM: Optional. VMWare: Optional")}}}
       </label>
       <input type="text" wizard_field="DEV_PREFIX" id="DEV_PREFIX" name="DEV_PREFIX"/>
     </div>
     <div class="large-6 columns">
       <label for="READONLY">
         {{tr "Read Only"}}
-        <span class="tip">
-          {{tr "Set how the image is exposed by the hypervisor"}}
-          <br>
-          <br>
-          {{tr "Xen: Optional"}}
-          <br>
-          {{tr "KVM: Optional"}}
-          <br>{{tr "VMWare: Optional"}}</span>
+        {{{tip (tr "Set how the image is exposed by the hypervisor. Xen: Optional. KVM: Optional. VMWare: Optional")}}}
       </label>
       <select wizard_field="READONLY" id="READONLY" name="READONLY">
         <option value=""></option>
@@ -119,7 +85,7 @@
     <div class="large-6 columns hypervisor only_kvm">
       <label for="CACHE">
         {{tr "Cache"}}
-        <span class="tip">{{tr "Selects the cache mechanism for the disk."}}</span>
+        {{{tip (tr "Selects the cache mechanism for the disk.")}}}
       </label>
       <select wizard_field="CACHE" id="CACHE" name="CACHE">
         <option value=""></option>
@@ -134,7 +100,7 @@
     <div class="large-6 columns hypervisor only_kvm">
       <label for="IO">
         {{tr "IO"}}
-        <span class="tip">{{tr "Set IO policy."}}</span>
+        {{{tip (tr "Set IO policy.")}}}
       </label>
       <select wizard_field="IO" id="IO" name="IO">
         <option value=""></option>
@@ -145,7 +111,7 @@
     <div class="large-6 columns hypervisor only_kvm">
       <label for="DISCARD">
         {{tr "DISCARD"}}
-        <span class="tip">{{tr "Set DISCARD feature."}}</span>
+        {{{tip (tr "Set DISCARD feature.")}}}
       </label>
       <select wizard_field="DISCARD" id="DISCARD" name="DISCARD">
         <option value=""></option>
@@ -156,54 +122,42 @@
     <div class="large-6 columns hypervisor only_kvm">
       <label for="TOTAL_BYTES_SEC">
         {{tr "Total Bytes Sec"}}
-        <span class="tip">
-          {{tr "IO throttling attributes for the disk. They are specified in bytes or IOPS (IO Operations) and can be specified for the total (read+write) or specific for read or write. Total and read or write can not be used at the same time. By default these parameters are only allowed to be used by oneadmin."}}
-        </span>
+        {{{tip (tr "IO throttling attributes for the disk. They are specified in bytes or IOPS (IO Operations) and can be specified for the total (read+write) or specific for read or write. Total and read or write can not be used at the same time. By default these parameters are only allowed to be used by oneadmin.")}}}
       </label>
       <input wizard_field="TOTAL_BYTES_SEC" type="text" id="TOTAL_BYTES_SEC" name="TOTAL_BYTES_SEC" />
     </div>
     <div class="large-6 columns hypervisor only_kvm">
       <label for="READ_BYTES_SEC">
         {{tr "Read Bytes Sec"}}
-        <span class="tip">
-          {{tr "IO throttling attributes for the disk. They are specified in bytes or IOPS (IO Operations) and can be specified for the total (read+write) or specific for read or write. Total and read or write can not be used at the same time. By default these parameters are only allowed to be used by oneadmin."}}
-        </span>
+        {{{tip (tr "IO throttling attributes for the disk. They are specified in bytes or IOPS (IO Operations) and can be specified for the total (read+write) or specific for read or write. Total and read or write can not be used at the same time. By default these parameters are only allowed to be used by oneadmin.")}}}
       </label>
       <input wizard_field="READ_BYTES_SEC" type="text" id="READ_BYTES_SEC" name="READ_BYTES_SEC" />
     </div>
     <div class="large-6 columns hypervisor only_kvm">
       <label for="WRITE_BYTES_SEC">
         {{tr "Write Bytes Sec"}}
-        <span class="tip">
-          {{tr "IO throttling attributes for the disk. They are specified in bytes or IOPS (IO Operations) and can be specified for the total (read+write) or specific for read or write. Total and read or write can not be used at the same time. By default these parameters are only allowed to be used by oneadmin."}}
-        </span>
+        {{{tip (tr "IO throttling attributes for the disk. They are specified in bytes or IOPS (IO Operations) and can be specified for the total (read+write) or specific for read or write. Total and read or write can not be used at the same time. By default these parameters are only allowed to be used by oneadmin.")}}}
       </label>
       <input wizard_field="WRITE_BYTES_SEC" type="text" id="WRITE_BYTES_SEC" name="WRITE_BYTES_SEC" />
     </div>
     <div class="large-6 columns hypervisor only_kvm">
       <label for="TOTAL_IOPS_SEC">
         {{tr "Total IOPS Sec"}}
-        <span class="tip">
-          {{tr "IO throttling attributes for the disk. They are specified in bytes or IOPS (IO Operations) and can be specified for the total (read+write) or specific for read or write. Total and read or write can not be used at the same time. By default these parameters are only allowed to be used by oneadmin."}}
-        </span>
+        {{{tip (tr "IO throttling attributes for the disk. They are specified in bytes or IOPS (IO Operations) and can be specified for the total (read+write) or specific for read or write. Total and read or write can not be used at the same time. By default these parameters are only allowed to be used by oneadmin.")}}}
       </label>
       <input wizard_field="TOTAL_IOPS_SEC" type="text" id="TOTAL_IOPS_SEC" name="TOTAL_IOPS_SEC" />
     </div>
     <div class="large-6 columns hypervisor only_kvm">
       <label for="READ_IOPS_SEC">
         {{tr "Read IOPS Sec"}}
-        <span class="tip">
-          {{tr "IO throttling attributes for the disk. They are specified in bytes or IOPS (IO Operations) and can be specified for the total (read+write) or specific for read or write. Total and read or write can not be used at the same time. By default these parameters are only allowed to be used by oneadmin."}}
-        </span>
+        {{{tip (tr "IO throttling attributes for the disk. They are specified in bytes or IOPS (IO Operations) and can be specified for the total (read+write) or specific for read or write. Total and read or write can not be used at the same time. By default these parameters are only allowed to be used by oneadmin.")}}}
       </label>
       <input wizard_field="READ_IOPS_SEC" type="text" id="READ_IOPS_SEC" name="READ_IOPS_SEC" />
     </div>
     <div class="large-6 columns hypervisor only_kvm">
       <label for="WRITE_IOPS_SEC">
         {{tr "Write IOPS Sec"}}
-        <span class="tip">
-          {{tr "IO throttling attributes for the disk. They are specified in bytes or IOPS (IO Operations) and can be specified for the total (read+write) or specific for read or write. Total and read or write can not be used at the same time. By default these parameters are only allowed to be used by oneadmin."}}
-        </span>
+        {{{tip (tr "IO throttling attributes for the disk. They are specified in bytes or IOPS (IO Operations) and can be specified for the total (read+write) or specific for read or write. Total and read or write can not be used at the same time. By default these parameters are only allowed to be used by oneadmin.")}}}
       </label>
       <input wizard_field="WRITE_IOPS_SEC" type="text" id="WRITE_IOPS_SEC" name="WRITE_IOPS_SEC" />
     </div>
@@ -218,7 +172,7 @@
     <div class="large-2 columns">
       <label class="inline" for="SIZE_TMP">
         {{tr "Size"}}
-        <span class="tip">{{tr "Size of the new disk"}}</span>
+        {{{tip (tr "Size of the new disk")}}}
       </label>
     </div>
     <div class="large-6 columns">
@@ -238,7 +192,7 @@
     <div class="large-6 columns">
       <label for="TYPE">
         {{tr "Type"}}
-        <span class="tip">{{tr "Disk type"}}</span>
+        {{{tip (tr "Disk type")}}}
       </label>
       <select wizard_field="TYPE" id="TYPE" name="type">
         <option value="fs">{{tr "FS"}}</option>
@@ -248,7 +202,7 @@
     <div class="large-6 columns">
       <label for="FORMAT">
         {{tr "Format"}}
-        <span class="tip">{{tr "Filesystem type for the fs images"}}</span>
+        {{{tip (tr "Filesystem type for the fs images")}}}
       </label>
       <input wizard_field="FORMAT" type="text" id="FORMAT" name="format" />
     </div>
@@ -259,28 +213,14 @@
     <div class="large-6 columns">
       <label for="TARGET">
         {{tr "Target"}}
-        <span class="tip">
-          {{tr "Device to map image disk. If set, it will overwrite the default device mapping"}}
-          <br>
-          <br>
-          {{tr "Xen: Optional"}}
-          <br>
-          {{tr "KVM: Optional"}}
-          <br>{{tr "VMWare: Optional"}}</span>
+        {{{tip (tr "Device to map image disk. If set, it will overwrite the default device mapping. Xen: Optional. KVM: Optional. VMWare: Optional")}}}
       </label>
       <input wizard_field="TARGET" type="text"  id="TARGET" name="target"/>
     </div>
     <div class="large-6 columns hypervisor only_xen only_kvm">
       <label for="DRIVER">
         {{tr "Driver"}}
-        <span class="tip">
-          {{tr "Specific image mapping driver"}}
-          <br>
-          <br>
-          {{tr "Xen: Optional (tap:aio:, file:)"}}
-          <br>
-          {{tr "KVM: Optional (raw, qcow2)"}}
-          <br>{{tr "VMWare: Not supported"}}</span>
+        {{{tip (tr "Specific image mapping driver. Xen: Optional (tap:aio:, file:). KVM: Optional (raw, qcow2). VMWare: Not supported")}}}
       </label>
       <input wizard_field="DRIVER" type="text" id="DRIVER" name="driver" />
     </div>
@@ -289,28 +229,14 @@
     <div class="large-6 columns">
       <label for="DEV_PREFIX">
         {{tr "Device Prefix"}}
-        <span class="tip">
-          {{tr "Prefix for the emulated device this image will be mounted at. For instance, “hd”, “sd”, or “vd” for KVM virtio. If omitted, the dev_prefix attribute of the Image will be used"}}
-          <br>
-          <br>
-          {{tr "Xen: Optional"}}
-          <br>
-          {{tr "KVM: Optional"}}
-          <br>{{tr "VMWare: Optional"}}</span>
+        {{{tip (tr "Prefix for the emulated device this image will be mounted at. For instance, hd, sd, or vd for KVM virtio. If omitted, the dev_prefix attribute of the Image will be used. Xen: Optional. KVM: Optional. VMWare: Optional")}}}
       </label>
       <input wizard_field="DEV_PREFIX" type="text" id="DEV_PREFIX" name="DEV_PREFIX"/>
     </div>
     <div class="large-6 columns">
       <label for="READONLY">
         {{tr "Read Only"}}
-        <span class="tip">
-          {{tr "Set how the image is exposed by the hypervisor"}}
-          <br>
-          <br>
-          {{tr "Xen: Optional"}}
-          <br>
-          {{tr "KVM: Optional"}}
-          <br>{{tr "VMWare: Optional"}}</span>
+        {{{tip (tr "Set how the image is exposed by the hypervisor. Xen: Optional. KVM: Optional. VMWare: Optional")}}}
       </label>
       <select wizard_field="READONLY" id="READONLY" name="READONLY">
         <option value=""></option>
@@ -323,7 +249,7 @@
     <div class="large-6 columns hypervisor only_kvm">
       <label for="CACHE">
         {{tr "Cache"}}
-        <span class="tip">{{tr "Selects the cache mechanism for the disk."}}</span>
+        {{{tip (tr "Selects the cache mechanism for the disk.")}}}
       </label>
       <select wizard_field="CACHE" id="CACHE" name="CACHE">
         <option value=""></option>
@@ -338,7 +264,7 @@
     <div class="large-6 columns hypervisor only_kvm">
       <label for="IO">
         {{tr "IO"}}
-        <span class="tip">{{tr "Set IO policy."}}</span>
+        {{{tip (tr "Set IO policy.")}}}
       </label>
       <select wizard_field="IO" id="IO" name="IO">
         <option value=""></option>
@@ -349,57 +275,45 @@
     <div class="large-6 columns hypervisor only_kvm">
       <label for="TOTAL_BYTES_SEC">
         {{tr "Total Bytes Sec"}}
-        <span class="tip">
-          {{tr "IO throttling attributes for the disk. They are specified in bytes or IOPS (IO Operations) and can be specified for the total (read+write) or specific for read or write. Total and read or write can not be used at the same time. By default these parameters are only allowed to be used by oneadmin."}}
-        </span>
+        {{{tip (tr "IO throttling attributes for the disk. They are specified in bytes or IOPS (IO Operations) and can be specified for the total (read+write) or specific for read or write. Total and read or write can not be used at the same time. By default these parameters are only allowed to be used by oneadmin.")}}}
       </label>
       <input wizard_field="TOTAL_BYTES_SEC" type="text" id="TOTAL_BYTES_SEC" name="TOTAL_BYTES_SEC" />
     </div>
     <div class="large-6 columns hypervisor only_kvm">
       <label for="READ_BYTES_SEC">
         {{tr "Read Bytes Sec"}}
-        <span class="tip">
-          {{tr "IO throttling attributes for the disk. They are specified in bytes or IOPS (IO Operations) and can be specified for the total (read+write) or specific for read or write. Total and read or write can not be used at the same time. By default these parameters are only allowed to be used by oneadmin."}}
-        </span>
+        {{{tip (tr "IO throttling attributes for the disk. They are specified in bytes or IOPS (IO Operations) and can be specified for the total (read+write) or specific for read or write. Total and read or write can not be used at the same time. By default these parameters are only allowed to be used by oneadmin.")}}}
       </label>
       <input wizard_field="READ_BYTES_SEC" type="text" id="READ_BYTES_SEC" name="READ_BYTES_SEC" />
     </div>
     <div class="large-6 columns hypervisor only_kvm">
       <label for="WRITE_BYTES_SEC">
         {{tr "Write Bytes Sec"}}
-        <span class="tip">
-          {{tr "IO throttling attributes for the disk. They are specified in bytes or IOPS (IO Operations) and can be specified for the total (read+write) or specific for read or write. Total and read or write can not be used at the same time. By default these parameters are only allowed to be used by oneadmin."}}
-        </span>
+        {{{tip (tr "IO throttling attributes for the disk. They are specified in bytes or IOPS (IO Operations) and can be specified for the total (read+write) or specific for read or write. Total and read or write can not be used at the same time. By default these parameters are only allowed to be used by oneadmin.")}}}
       </label>
       <input wizard_field="WRITE_BYTES_SEC" type="text" id="WRITE_BYTES_SEC" name="WRITE_BYTES_SEC" />
     </div>
     <div class="large-6 columns hypervisor only_kvm">
       <label for="TOTAL_IOPS_SEC">
         {{tr "Total IOPS Sec"}}
-        <span class="tip">
-          {{tr "IO throttling attributes for the disk. They are specified in bytes or IOPS (IO Operations) and can be specified for the total (read+write) or specific for read or write. Total and read or write can not be used at the same time. By default these parameters are only allowed to be used by oneadmin."}}
-        </span>
+        {{{tip (tr "IO throttling attributes for the disk. They are specified in bytes or IOPS (IO Operations) and can be specified for the total (read+write) or specific for read or write. Total and read or write can not be used at the same time. By default these parameters are only allowed to be used by oneadmin.")}}}
       </label>
       <input wizard_field="TOTAL_IOPS_SEC" type="text" id="TOTAL_IOPS_SEC" name="TOTAL_IOPS_SEC" />
     </div>
     <div class="large-6 columns hypervisor only_kvm">
       <label for="READ_IOPS_SEC">
         {{tr "Read IOPS Sec"}}
-        <span class="tip">
-          {{tr "IO throttling attributes for the disk. They are specified in bytes or IOPS (IO Operations) and can be specified for the total (read+write) or specific for read or write. Total and read or write can not be used at the same time. By default these parameters are only allowed to be used by oneadmin."}}
-        </span>
+        {{{tip (tr "IO throttling attributes for the disk. They are specified in bytes or IOPS (IO Operations) and can be specified for the total (read+write) or specific for read or write. Total and read or write can not be used at the same time. By default these parameters are only allowed to be used by oneadmin.")}}}
       </label>
       <input wizard_field="READ_IOPS_SEC" type="text" id="READ_IOPS_SEC" name="READ_IOPS_SEC" />
     </div>
     <div class="large-6 columns hypervisor only_kvm">
       <label for="WRITE_IOPS_SEC">
         {{tr "Write IOPS Sec"}}
-        <span class="tip">
-          {{tr "IO throttling attributes for the disk. They are specified in bytes or IOPS (IO Operations) and can be specified for the total (read+write) or specific for read or write. Total and read or write can not be used at the same time. By default these parameters are only allowed to be used by oneadmin."}}
-        </span>
+        {{{tip (tr "IO throttling attributes for the disk. They are specified in bytes or IOPS (IO Operations) and can be specified for the total (read+write) or specific for read or write. Total and read or write can not be used at the same time. By default these parameters are only allowed to be used by oneadmin.")}}}
       </label>
       <input wizard_field="WRITE_IOPS_SEC" type="text" id="WRITE_IOPS_SEC" name="WRITE_IOPS_SEC" />
     </div>
   </div>
   {{/advancedSection}}
-</div>
\ No newline at end of file
+</div>
diff --git a/src/sunstone/public/app/templates/helpers/tip.js b/src/sunstone/public/app/templates/helpers/tip.js
new file mode 100644
index 0000000000..4ff2f57743
--- /dev/null
+++ b/src/sunstone/public/app/templates/helpers/tip.js
@@ -0,0 +1,12 @@
+define(function(require) {
+  var Handlebars = require('hbs/handlebars');
+  var Locale = require('utils/locale');
+  var Tips = require('utils/tips');
+
+  var tip = function(context, options) {
+    return Tips.html(context);
+  };
+
+  Handlebars.registerHelper('tip', tip);
+  return tip;
+})
diff --git a/src/sunstone/public/app/utils/tips.js b/src/sunstone/public/app/utils/tips.js
index f01be1d54d..5e91052399 100644
--- a/src/sunstone/public/app/utils/tips.js
+++ b/src/sunstone/public/app/utils/tips.js
@@ -4,7 +4,7 @@ define(function(require) {
   //displays the tip information on mouseover.
   var _setup = function(context, position) {
     //For each tip in this context
-    $('.tip', context).each(function() {
+    /*$('.tip', context).each(function() {
       var obj = $(this);
       obj.removeClass('tip');
       var tip = obj.html();
@@ -15,11 +15,16 @@ define(function(require) {
       }
       //replace the text with an icon and spans
       obj.html('<span data-tooltip class="' + tip_classes.join(' ') + '" data-width="210" title="' + tip + '"><i class="fa fa-question-circle"></i></span>');
-    });
-    $(document).foundation('reflow', 'tooltip');
+    });*/
+    //$(document).foundation('reflow', 'tooltip');
+  }
+
+  var _html = function(str) {
+    return '<span data-tooltip class="" data-width="210" title="' + str + '"><i class="fa fa-question-circle"></i></span>'
   }
 
   return {
-    'setup': _setup
+    'setup': _setup,
+    'html': _html
   }
 })