qTip Text Tip simple plugin not working

Question

I am trying to install a simple text tip jquery called qtip from the following site: http://craigsworks.com/projects/qtip2/, with no success. It is simply not working, I am not getting any errors. I have been trying to troubleshoot this for over an hour now.

My code below there is a blank div of class .something I am simply trying to display any text using a qtip when the box is hovered to confirm that it is working.

Javascript

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>
<script type="text/javascript" src="jquery.qtip.min.js"></script>
<script>
 $(document).ready(function(){
    $(".myform").validate({
        highlight: function(element, errorClass, validClass) {
             $(element).css('border', '1px solid red');
          },
          unhighlight: function(element, errorClass, validClass) {
             $(element).css('border', '1px solid #ddd');
          },
        messages: {
            first: "Please specify your name",
        }
    });

    $('.something').qtip('hello');
  });
</script>

Markup

<form class="myForm" method="post" action="action.php">
    First <input type="text" name="first" class="required"/><br/>
    Last <input type="text" name="last"  /><br/>
    Phone <input type="text" name="phone"  class="required"/><br/>
    <div class="something" style="border:1px solid red; height:150px; width:300px;"></div>
    <input type="submit">
</form>

I appreciate any suggestions on what might be the problem.

Many thanks in advance!

You might be interested in this: http://stackoverflow.com/questions/14741688/how-to-display-messages-from-jquery-validate-plugin-inside-of-tooltipster-toolti — Sparky, Apr 05 '13 at 16:12

score 0 · Answer 1 · answered Apr 05 '13 at 16:17

0

Your tooltip doesn't show as you expected because forgot to add title attribute to your div as well as you didn't include the css file of qtip 2.

http://qtip2.com/v/nightly/jquery.qtip.css

Just complete that two steps and your code will works.

Demo: http://jsfiddle.net/dzcc5/

answered Apr 05 '13 at 16:17

Eli

14,779
5
59
77

Thanks for the reply! While it works on jsfiddle it does not work on my testing server :/ I keep getting the followign error: `Uncaught TypeError: Cannot read property 'mozilla' of undefined` and found this discussion about it: http://craigsworks.com/projects/forums/thread-solved-uncaught-typeerror-cannot-read-property-mozilla-of-undefined-error , however, this does not really make sense to me because jsfiddle is using the same version of jquery as I am.... – AnchovyLegend Apr 05 '13 at 16:20
well, after look through that post, I would suggest you using [jQuery Migrate Plugin](https://github.com/jquery/jquery-migrate/) to make qtip compatible with the latest jquery version – Eli Apr 05 '13 at 16:23
the post also mentions that it should work without it with jquery version 1.9.0 also jsfiddle uses jquery version 1.9.1 and it works, which doesn't make sense to me. Also, when I use it on my testing server as stated in your jsfiddle code without migration it works, however, when I add additional features, it get the `mozilla` error – AnchovyLegend Apr 05 '13 at 16:29

Ryan · Answer 2 · 2013-04-05T16:12:13.597

-1

From the documentation you referenced, the default area the qTip plugin is looking for content to display as a tooltip is the "title" attribute.

Try changing your div to:

<div title="hello" class="something" style="border:1px solid red; height:150px; width:300px;"></div>

And your qTip initializer to:

$('.something').qtip();

EDIT: Although that is the default, you probably don't want to be adding title tags to divs.

It looks you can set the message content by doing the following:

$('.something').qtip({
    content:{
        text: 'hello'
    }
});

Please have a good look at the documentation regarding styling and other options available to that plugin.

edited Apr 05 '13 at 16:12

answered Apr 05 '13 at 15:52

Ryan

768
4
15

Thanks for the reply. I am not sure who downvoted you. I was able to get the default text tip to show using your advice, but not with the arrow :/ – AnchovyLegend Apr 05 '13 at 15:59
Feel free to rectify it by upvoting and accepting the answer =) What are you trying to do with an "arrow"? Your comment is the first mention I see of an "arrow". – Ryan Apr 05 '13 at 16:01
Almost all qtip demos on the site are made up of a div with an arrow pointing out of it, where I can use JQuery to choose the direction of the arrow and the position of the qtip container, that what I have been trying to accomplish... – AnchovyLegend Apr 05 '13 at 16:03
I'm not much of a CSS guy, please see the documentation (link above) for the styling options available. – Ryan Apr 05 '13 at 16:14

qTip Text Tip simple plugin not working

2 Answers2