Solved

Wanting to add an image to qtip jQuery plugin

Posted on 2011-09-28
14
297 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
Comment Utility
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
Comment Utility
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
Comment Utility
I guess the problem is I can't inlucde the qtip library inside of jsfiddle.....
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
can you post the js for the qtip you're using? Do you have any options set?
0
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 
LVL 5

Author Comment

by:knowlton
Comment Utility
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
Comment Utility
thx
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
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…

762 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

6 Experts available now in Live!

Get 1:1 Help Now