• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 311
  • Last Modified:

Wanting to add an image to qtip jQuery plugin

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
Tom Knowlton
Asked:
Tom Knowlton
  • 7
  • 6
2 Solutions
 
Gurvinder Pal SinghCommented:
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
 
Tom KnowltonWeb developerAuthor Commented:
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
 
Tom KnowltonWeb developerAuthor Commented:
I guess the problem is I can't inlucde the qtip library inside of jsfiddle.....
0
Cloud Class® Course: C++ 11 Fundamentals

This course will introduce you to C++ 11 and teach you about syntax fundamentals.

 
Kyle HamiltonData ScientistCommented:
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
 
Kyle HamiltonData ScientistCommented:
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
 
Tom KnowltonWeb developerAuthor Commented:
Right now the page is only running in my dev environ...there is no public link available.
0
 
Kyle HamiltonData ScientistCommented:
can you post the js for the qtip you're using? Do you have any options set?
0
 
Tom KnowltonWeb developerAuthor Commented:
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
 
Tom KnowltonWeb developerAuthor Commented:
thx
0
 
Kyle HamiltonData ScientistCommented:
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
 
Tom KnowltonWeb developerAuthor Commented:
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
 
Kyle HamiltonData ScientistCommented:
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
 
Kyle HamiltonData ScientistCommented:
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
 
Tom KnowltonWeb developerAuthor Commented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

  • 7
  • 6
Tackle projects and never again get stuck behind a technical roadblock.
Join Now