Solved

Wanting to add an image to qtip jQuery plugin

Posted on 2011-09-28
14
298 Views
Last Modified: 2012-05-12
Plugin documentation:

http://craigsworks.com/projects/qtip/docs/reference/#content

The plugin adds a callout or tooltip to the selected element.

I want to add an image to the callout as well, before the message:

 qtip change
0
Comment
Question by:knowlton
  • 7
  • 6
14 Comments
 
LVL 40

Accepted Solution

by:
gurvinder372 earned 400 total points
ID: 36810002
you need to add the positioning
http://craigsworks.com/projects/qtip/docs/tutorials/#position

and styling to this
http://craigsworks.com/projects/qtip/docs/tutorials/#styling

positioning should be relatively simpler, and so it styling.
But in styling you need to give a class, which should be having a background-image with background-position as left and no-repeat
0
 
LVL 5

Author Comment

by:knowlton
ID: 36815424
Are you able to provide sameple code?

For example:

http://jsfiddle.net/kiddailey/37NUY/

or

http://jsfiddle.net/kiddailey/UyZnb/

are parts of what I need.

0
 
LVL 5

Author Comment

by:knowlton
ID: 36815431
I guess the problem is I can't inlucde the qtip library inside of jsfiddle.....
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 36816665
add this to your .ui-tooltip-default class in the jquery.qtip.css file:

(download the image or use your own. You can style the tooltip however you like...)

 
padding-left:50px;
min-height:50px;
border:3px solid black;
background:url(http://www.candpgeneration.com/images/EE-x.png) 5px 2px no-repeat;

Open in new window

0
 
LVL 25

Assisted Solution

by:Kyle Hamilton
Kyle Hamilton earned 100 total points
ID: 36816734
http://jsfiddle.net/37NUY/40/


If you post a link to your page, it'll be easier for me to figure out where to take out the yellow bg.

Cheers.
0
 
LVL 5

Author Comment

by:knowlton
ID: 36816758
Right now the page is only running in my dev environ...there is no public link available.
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 36816790
can you post the js for the qtip you're using? Do you have any options set?
0
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
LVL 5

Author Comment

by:knowlton
ID: 36816818
Well, here is the javascript portion right now:

<script type="text/javascript">
    $(document).ready(function ()
    {
        $('#f1').blur(function ()
        {
            validateCCNum('#f1');
        });
    });

    function validateCCNum(a)
    {
        if ($(a).val() == "")
        {            
                $(a).css("border", "3px solid red");

                $(a).qtip({

                    content: $('#ccnumrequired'),
                    show: { ready: true 
                },
                hide: {
                    fixed: true,
                    delay: 180
                },
                style: {
                    width: { max: 500 },
                    padding: 5,
                    background: '#FEF8A9',
                    color: 'black',
                    textAlign: 'center',
                    border: {
                        width: 1,
                        radius: 5,
                        color: '#000'
                    }
                }


            });

        }
        else
        {
            var selectedText = $("[id*='dlPayCardType'] :selected").text();

            var ccnumtext = $(a).val();

            var result = false;

            alert(selectedText);

            alert(ccnumtext);      

            switch (selectedText)
            {
                case "Visa":
                    alert("testing visa");
                    var visaregex = "^([4]{1})([0-9]{12,15})$";
                    result = visaregex.test(ccnumtext);
                    break;
                default:
                    break;
            }


            alert(result);
            e.preventDefault();

            if (result == true)
            {
                alert("validation failed");
                $(a).css("border", "3px solid green");

                $(a).qtip({

                    content: $('#ccnuminvalid'),
                    show: { ready: true
                    },
                    hide: {
                        fixed: true,
                        delay: 180
                    },
                    style: {
                        width: { max: 500 },
                        padding: 5,
                        background: '#FEF8A9',
                        color: 'black',
                        textAlign: 'center',
                        border: {
                            width: 1,
                            radius: 5,
                            color: '#000'
                        }
                    }


                });


            }


        }
    }

</script>



Actually, I think it is working now....sorry my brain is not working today.

Open in new window

0
 
LVL 5

Author Closing Comment

by:knowlton
ID: 36816824
thx
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 36816867
no problem,

if you want to further customize the css, you could edit the .ui-tooltip-content class. That's where the yellow background is coming from on your jsfiddle page.

Cheers.
0
 
LVL 5

Author Comment

by:knowlton
ID: 36816906
if you want to further customize the css, you could edit the .ui-tooltip-content class. That's where the yellow background is coming from on your jsfiddle page.

==================

So I would have to modify that class inside of jquery.ui    ???
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 36817072
No, no..

Just download the jquery.qtip.css file, make the change in that file, and link to your local copy instead of theirs.
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 36817087
or if you don't want to do that,

you can add those classes to your local stylesheet, and override the settings you want to change. You might need to use !mportant .

Let me know if that makes sense.

cheers.
0
 
LVL 5

Author Comment

by:knowlton
ID: 36817126
It sort of makes sense.

I think what I will do at this point is open a new question if I have some issue concerning this.


I appreciate all the help, btw.
0

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

by Julian Matz As of jQuery (http://jquery.com/) 1.4 the .live() method (http://api.jquery.com/live/) supports custom events as well as some standard JavaScript events that it previously didn't support. Among these is the submit event. Unlike …
In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

910 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now