Search code examples
jqueryjquery-pluginsqtip

jQuery qTip not changing classes ?


Hii i am using qTip 2 i want the class ui-tooltip-dark ui-tooltip-shadow but it doesnt shows that class. I have this code:

    $('.selector').qtip({
   content: {
      text: function(api) {
         // Retrieve content from custom attribute of the $('.selector') elements.
         return $(this).attr('qtip-content');
        }
      },
      title: {
         text: function(api) {
            // Retrieve content from ALT attribute of the $('.selector') element
            return $(this).attr('alt');
         }
      },
     style: {
      classes: 'ui-tooltip-dark ui-tooltip-shadow';
      }
});

But when i put the code that is on their site it works

Can u please tell me where am i going wrong ?

EDIT

    <script type="text/javascript" class="example">
$(document).ready(function()
{
    $('.selector').qtip({
   content: {
      text: function(api) {
         // Retrieve content from custom attribute of the $('.selector') elements.
         return $(this).attr('qtip-content');
      }
     },
      title: {
         text: function(api) {
            // Retrieve content from ALT attribute of the $('.selector') element
            return $(this).attr('alt');
         }
      },
     style: {
      classes: 'ui-tooltip-dark ui-tooltip-shadow';
      }
});
});
</script>

Solution

  • It might just be a typo in what you've posted but you're missing a curly brace around the content section -

    $('.selector').qtip({
       content: {
          text: function(api) {
             // Retrieve content from custom attribute of the $('.selector') elements.
             return $(this).attr('qtip-content');
          }
         },
          title: {
             text: function(api) {
                // Retrieve content from ALT attribute of the $('.selector') element
                return $(this).attr('alt');
             }
          },
         style: {
          classes: 'ui-tooltip-dark ui-tooltip-shadow';
          }
    });
    

    EDIT

    Try this -

    $(document).ready(function()
    {
        $('.selector').qtip({
       content: {
          text: function(api) {
             // Retrieve content from custom attribute of the $('.selector') elements.
             return $(this).attr('qtip-content');
          },
          title: {
             text: function(api) {
                // Retrieve content from ALT attribute of the $('.selector') element
                return $(this).attr('alt');
             }
          }
       },
       style: {
          classes: 'ui-tooltip-dark ui-tooltip-shadow'
          }      
        });
    });
    

    You should be able to see it working here - http://jsfiddle.net/KaJ9q/