CC-3660: Cannot click Airtime Manual link on override info popup

- replaced the popup with qtip

airtime_mvc/application/forms/LiveStreamingPreferences.php

@@ -99,10 +99,8 @@ class Application_Form_LiveStreamingPreferences extends Zend_Form_SubForm
             $live_dj_connection_url = "N/A";
         }
         
-        $overrideDescription = "If Airtime is behind a router or firewall, you may need to configure port forwarding and this field information will be incorrect. In this case you will need to manually update this field so it shows the correct host/port/mount that your DJ's need to connect to. The allowed range is between 1024 and 49151. For more detail, please read the <a target=\"_blank\" href=\"http://manuals.sourcefabric.org/\">Airtime manual</a>.";
-        
         $this->setDecorators(array(
-        array('ViewScript', array('viewScript' => 'form/preferences_livestream.phtml', 'master_dj_connection_url'=>$master_dj_connection_url, 'live_dj_connection_url'=>$live_dj_connection_url,'overrideDescription' => $overrideDescription))
+        array('ViewScript', array('viewScript' => 'form/preferences_livestream.phtml', 'master_dj_connection_url'=>$master_dj_connection_url, 'live_dj_connection_url'=>$live_dj_connection_url))
         ));
     }
     

airtime_mvc/application/views/scripts/form/preferences_livestream.phtml

@@ -77,10 +77,7 @@
         </dt>
         <dd id="master_dj_connection_url-element">
             <span id="stream_url"><?php echo $this->master_dj_connection_url ?></span>  <a href=# id="connection_url_override" style="font-size: 12px;">override</a>&nbsp;&nbsp;
-            <span class='info-tooltip'>
+            <span class="override_help_icon">
-                <span>
-                    <?php echo $this->overrideDescription ?>
-                </span>
             </span><br>
             <div id="master_dj_connection_url_tb" style="display:none"><input type="text"><a href=# id="ok" style="font-size: 12px;">OK</a>  <a href=# id="reset" style="font-size: 12px;">RESET</a></div>
         </dd>
@@ -118,10 +115,7 @@
         </dt>
         <dd id="live_dj_connection_url-element">
             <span id="stream_url"><?php echo $this->live_dj_connection_url ?></span>  <a href=# id="connection_url_override" style="font-size: 12px;">override</a>&nbsp;&nbsp;
-            <span class='info-tooltip'>
+            <span class="override_help_icon">
-                <span>
-                    <?php echo $this->overrideDescription?>
-                </span>
             </span><br>
             <div id="live_dj_connection_url_tb" style="display:none"><input type="text"><a href=# id="ok" style="font-size: 12px;">OK</a>  <a href=# id="reset" style="font-size: 12px;">RESET</a></div>
         </dd>

airtime_mvc/public/css/styles.css

@@ -93,6 +93,17 @@ select {
 }
 /* Version Notification Ends*/
 
+.override_help_icon {
+        cursor: help;
+        position: relative;
+        
+        display:inline-block; zoom:1; display:inline;
+        width:14px; height:14px;
+        background:url(/css/images/icon_info.png) 0 0 no-repeat;
+        float:right; position:relative; top:2px; right:7px;
+        line-height:16px !important;
+}
+
 /* Info Tooltip Starts */
 .info-tooltip {
         cursor: help;

airtime_mvc/public/js/airtime/preferences/streamsetting.js

@@ -235,4 +235,26 @@ $(document).ready(function() {
     
     showErrorSections()
     setInterval('checkLiquidsoapStatus()', 1000)
+    
+    // qtip for help text
+    $(".override_help_icon").qtip({
+        content: {
+            text: "If Airtime is behind a router or firewall, you may need to configure port forwarding and this field information will be incorrect. In this case you will need to manually update this field so it shows the correct host/port/mount that your DJ's need to connect to. The allowed range is between 1024 and 49151. For more detail, please read the <a target=\"_blank\" href=\"http://manuals.sourcefabric.org/\">Airtime manual</a>."
+        },
+        hide: {
+            delay: 500,
+            fixed: true
+        },
+        style: {
+            border: {
+                width: 0,
+                radius: 4
+            },
+            classes: "ui-tooltip-dark ui-tooltip-rounded"
+        },
+        position: {
+            my: "left bottom",
+            at: "right center"
+        },
+    })
 });