[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

x
?
Solved

Wanting to add an image to qtip jQuery plugin

Posted on 2011-09-28
14
Medium Priority
?
307 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:Tom Knowlton
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 7
  • 6
14 Comments
 
LVL 40

Accepted Solution

by:
Gurvinder Pal Singh earned 1600 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:Tom 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:Tom Knowlton
ID: 36815431
I guess the problem is I can't inlucde the qtip library inside of jsfiddle.....
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
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 400 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:Tom 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
 
LVL 5

Author Comment

by:Tom 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:Tom 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:Tom 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:Tom 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

On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

Question has a verified solution.

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

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn how to dynamically set the form action using jQuery.
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…
Suggested Courses

649 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