CC-3850: Use qTip instead of custom tooltips

-done

airtime_mvc/application/forms/AddShowLiveStream.php

@@ -6,7 +6,6 @@ class Application_Form_AddShowLiveStream extends Zend_Form_SubForm
 
     public function init()
     {
-        $description1 = "This follows the same security pattern for the shows: only users assigned to the show can connect.";
         $cb_airtime_auth = new Zend_Form_Element_Checkbox("cb_airtime_auth");
         $cb_airtime_auth->setLabel("Use Airtime Authentication:")
                           ->setDescription($description1)
@@ -14,7 +13,6 @@ class Application_Form_AddShowLiveStream extends Zend_Form_SubForm
                           ->setDecorators(array('ViewHelper'));
         $this->addElement($cb_airtime_auth);
         
-        $description2 = "Specify custom authentication which will work only for this show.";
         $cb_custom_auth = new Zend_Form_Element_Checkbox("cb_custom_auth");
         $cb_custom_auth  ->setLabel("Use Custom Authentication:")
                             ->setDescription($description2)
@@ -74,4 +72,4 @@ class Application_Form_AddShowLiveStream extends Zend_Form_SubForm
         }
         return $isValid;
     }
-}
+}

airtime_mvc/application/forms/StreamSetting.php

@@ -37,17 +37,7 @@ class Application_Form_StreamSetting extends Zend_Form
             }
             $this->addElement($output_type);
         }
-
+      
-        # tooltip
-        $description = 'This option enables metadata for OGG streams (stream
-                    metadata is the track title, artist, and show name that is
-                    displayed in an audio player). VLC and mplayer have a
-                    serious bug when playing an OGG/VORBIS stream that has
-                    metadata information enabled: they will disconnect from the
-                    stream after every song. If you are using an OGG stream and
-                    your listeners do not require support for these audio
-                    players, then feel free to enable this option.';
-
         $icecast_vorbis_metadata = new Zend_Form_Element_Checkbox('icecast_vorbis_metadata');
         $icecast_vorbis_metadata->setLabel('Icecast Vorbis Metadata')
                                 ->setDescription($description)

airtime_mvc/application/views/scripts/form/add-show-live-stream.phtml

@@ -3,11 +3,7 @@
         <dt id="cb_airtime_auth_override-label">
             <label class="optional" for="cb_airtime_auth">
             <?php echo $this->element->getElement('cb_airtime_auth')->getLabel() ?>
-            <span class='info-tooltip'>
+            <span class='airtime_auth_help_icon'></span>
-                        <span>
-                            <?php echo $this->element->getElement('cb_airtime_auth')->getDescription() ?>
-                        </span>
-                    </span>
             </label>
         </dt>
         <dd id="cb_airtime_auth_override-element">
@@ -16,11 +12,7 @@
         <dt id="cb_custom_auth_override-label">
             <label class="optional" for="cb_custom_auth">
             <?php echo $this->element->getElement('cb_custom_auth')->getLabel() ?>
-            <span class='info-tooltip'>
+            <span class='custom_auth_help_icon'></span>
-                        <span>
-                            <?php echo $this->element->getElement('cb_custom_auth')->getDescription() ?>
-                        </span>
-                    </span>
             </label>
         </dt>
         <dd id="cb_custom_auth_override-element">

airtime_mvc/application/views/scripts/preference/stream-setting.phtml

@@ -33,10 +33,7 @@
             <dt id="vorbisMetadata-label">
                 <label class="required">
                     <?php echo $this->form->getElement('icecast_vorbis_metadata')->getLabel() ?> :
-                    <span class='info-tooltip'>
+                    <span class='icecast_metadata_help_icon'>
-                        <span>
-                            <?php echo $this->form->getElement('icecast_vorbis_metadata')->getDescription() ?>
-                        </span>
                     </span>
                 </label>
             </dt>

airtime_mvc/public/css/styles.css

@@ -93,7 +93,7 @@ select {
 }
 /* Version Notification Ends*/
 
-.override_help_icon {
+.override_help_icon, .icecast_metadata_help_icon  {
         cursor: help;
         position: relative;
         
@@ -104,8 +104,7 @@ select {
         line-height:16px !important;
 }
 
-/* Info Tooltip Starts */
+.airtime_auth_help_icon, .custom_auth_help_icon {
-.info-tooltip {
         cursor: help;
         position: relative;
         display:inline-block; zoom:1;
@@ -114,28 +113,6 @@ select {
         top:2px; right:7px; left: 3px;
         line-height:16px !important;
 }
-.info-tooltip span {
-        margin-left: -9999em;
-        position: absolute;
-        padding: 1em 1em 1em 1em;
-        text-indent:0; font-family:Arial, Helvetica, sans-serif !important; font-size:13px !important;
-        border:#505050 solid 3px;
-        background:#e6e6e6;
-        cursor:text;
-}
-.info-tooltip:hover span:before {
-        content:"";
-        position:absolute; top:22px; left:-11px;
-        width:8px; height:15px;
-        margin:-7px 0 0 0;
-        background:url(/css/images/tooltip_arrow.png) 0 0 no-repeat;
-}
-.info-tooltip:hover span {
-        box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
-        position: absolute; left: 25px; top: -18px; z-index: 99;
-        margin-left: 0; width: 200px;
-}
-/* Info Tooltip Ends */
 
 /* Clearfix */
 .clearfix:after, #side_playlist li:after { content: "."; display: block;	height: 0; clear: both;  visibility: hidden;}

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

@@ -257,4 +257,25 @@ $(document).ready(function() {
             at: "right center"
         },
     })
+    
+    $(".icecast_metadata_help_icon").qtip({
+        content: {
+            text: "This option enables metadata for OGG streams (stream metadata is the track title, artist, and show name that is displayed in an audio player). VLC and mplayer have a serious bug when playing an OGG/VORBIS stream that has metadata information enabled: they will disconnect from the stream after every song. If you are using an OGG stream and your listeners do not require support for these audio players, then feel free to enable this option."
+        },
+        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"
+        },
+    })
 });

airtime_mvc/public/js/airtime/schedule/add-show.js

@@ -179,7 +179,48 @@ function setAddShowEvents() {
     form.find("#add_show_day_check-element").addClass("block-display clearfix");
     form.find("#add_show_day_check-element label").addClass("wrapp-label");
     form.find("#add_show_day_check-element br").remove();
-
+    
+    form.find(".airtime_auth_help_icon").qtip({
+        content: {
+            text: "This follows the same security pattern for the shows: only users assigned to the show can connect."
+        },
+        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"
+        }
+    });
+    form.find(".custom_auth_help_icon").qtip({
+        content: {
+            text: "Specify custom authentication which will work only for this show."
+        },
+        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"
+        }
+    });
+    
     function endDateVisibility(){
         if(form.find("#add_show_no_end").is(':checked')){
             form.find("#add_show_end_date").hide();