Exploring Creative Ways to Personalize qTip2 CSS

I have implemented qTip2 on my website but I am experiencing some CSS issues.

The following files have been included:

jquery.qtip.min.js jquery.qtip.min.css

In the JavaScript file, I have added the code snippet below:

$.each($(".tooltip"), function (i, val) {

    var theContent = $(val).html();
    $(val).qtip({
        content: {
            text: theContent
        },
        position: {
            my: "bottom left",
            at: "top right",
            viewport: $(window)
        },
        show: {
            event: false,
            ready: true
        },
        hide: {
            effect: function () { $(this).slideUp(5, function () { $(this).dequeue(); }); }
        },
        style: {
            classes: "ui-tooltip-shadow ui-tooltip-jtools"
        }
    });
});

While this setup is working fine, I need to customize it by extracting the jtools styles from jquery.qtip.css and placing them in my own CSS file like so:

.ui-tooltip-shadow {
    box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.15);
}

.ui-tooltip-MySite {
    background: #232323;
    /* More styling rules */
}
/* Rest of CSS */

In the tooltip declaration, I changed:
<code>classes: "ui-tooltip-shadow ui-tooltip-jtools"
to 
classes: "ui-tooltip-shadow ui-tooltip-MySite"

Despite these changes, the content still appears with the default yellow color. Why is that happening?
jqueryhtmlcssqtip2

Answer №1

The issue I encountered in my implementation was that the code snippet $.each($(".tooltip"), function (i, val) needed to be placed inside $(document).ready(function ().

Answer №2

To implement CSS styling as if it were a div, you can utilize the following code:

this.customStyle = function(){  
/* SETTINGS */        
    xOffset = 10;
    yOffset = 20;       
    // These two variables specify the distance of the popup from the cursor
    // Adjust them to achieve desired positioning     
/* END SETTINGS */        
$("img.tooltip").hover(function(e){                                           
    this.t = this.title;
    this.title = "";                                      
    $("body").append("<p id='tooltip'>" + this.t + "</p>");
    $("#tooltip")
        .css("top", (e.pageY - xOffset) + "px")
        .css("left", (e.pageX + yOffset) + "px")
        .fadeIn("fast");        
},
function(){
    this.title = this.t;        
    $("#tooltip").remove();
}); 
$("img.tooltip").mousemove(function(e){
    $("#tooltip")
        .css("top", (e.pageY - xOffset) + "px")
        .css("left", (e.pageX + yOffset) + "px");
    });         
};

Explore live demonstration here

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

New HTML5 feature enables users to upload images onto canvas, enabling them to drag, rotate, and even

I'm a beginner in Html5 and I'm having trouble with uploading an image to the canvas. When I provide the direct source of the image, it works fine. I referred to this link for help javascript: upload image file and draw it into a canvas. Let me s ...

jqueryhtmlimagecanvas

Can you provide instructions on utilizing WYSIWYG for real-time label editing?

I am currently developing an online survey creator. The structure of a Question entity is as follows: [Question] int QuestionId { get; set; } int QuestionNumber { get; set; } String QuestionText { get; set; } QuestionType QuestionType { get; } When prese ...

javascriptjqueryajaxasp.net-mvc-3

Attempting to retrieve XML/JSON

I am struggling with extracting the first 15 words from a file using the API. I have attempted to do it with both XML and JSON, but keep encountering this error: XMLHttpRequest cannot load No 'Access-Control-Allow-Origin' header is present on th ...

javascriptphpjqueryxmljson

Single Page Site - navigation to distinct sections with 'placeholder' pages

As part of a school project, I have been tasked with designing a website. My goal is to create a single-page website, but we are required to link to different pages like contact.html. I also want the page to smoothly scroll to the navigation section when a ...

javascriptjqueryhtmlanchor

If Bootstrap CSS is linked, custom CSS style rules will only take effect when added within a style tag

I’m currently facing an issue where my custom CSS rules are not being applied after linking Bootstrap in my project. I am using Bootstrap CSS for a custom layout and need to incorporate my own styling as well. When I link bootstrap.min.css followed by m ...

cssbootstrap-4

Leveraging the power of PHP includes with nested subdirectories

Hello, I recently configured my web server to run all .html files as .php files, allowing me to utilize the php include function, which has been very beneficial. However, I have various subdirectories with multiple files in each one. Homepage --banners ...

phphtmlcssphp-include

What is the process for updating an application?

I have developed a PhoneGap application for Android that is currently hosted on my website. Periodically, I release updates to the app and would like to inform users when a new version is available. What is the best way to send notification updates to app ...

androidjqueryhtmlcordova

Form for contacting with file attachment option

I'm having trouble integrating file upload functionality into my existing code. I've been scouring the internet for solutions but haven't found anything that fits seamlessly with my current setup. It's frustrating to encounter error aft ...

phphtmltwitter-bootstrap-3

Using AJAX to load dynamically generated DIV IDs

On my website, I have a "command center" bar featuring a log in / log out button, a my account button, and a messages button. When the user is not logged in, only the login button is displayed. However, once the user logs in, the command center shows the l ...

jqueryajax

Firefox not triggering image onload event

I have developed an image preloader that is functioning perfectly in all browsers except for Firefox (currently tested with version 10.0). Essentially, the input consists of an array of images named image_list. These images are dynamically appended to the ...

javascriptjqueryfirefox

Issue with the height of Bootstrap 4 navigation bar

After deciding to use Bootstrap 4 for my current project, I encountered an issue with the navbar. It seems to expand too much, which is only happening once I deploy the website. Can anyone help me figure out what's causing this problem? Below is the c ...

htmlcsstwitter-bootstraptwitter-bootstrap-4

Searching for tables data by employing the Curl command

Seeking assistance with parsing data from a website. The JSON request runs successfully in the command line but encounters issues when attempting to execute it on Android: The request: "curl '' -H 'Host: billetterie.ctm.ma' -H &apo ...

androidhtmlparsingjsoup

Utilizing HTML/CSS (with Bootstrap): Reveal the concealed <input type="color"> color selector by clicking on a different HTML component

Is there a way to trigger a color picker from a hidden <input type="color"> by clicking on another HTML element, like a <span>? While this functionality seems to work on Firefox, it consistently fails on Chromium. Are there any cross- ...

javascripthtmlcssbootstrap-5

The div containing the AJAX POST success message suddenly vanishes within moments of being uploaded

Encountering an issue following a successful AJAX post, where the updated div disappears shortly after Here are the jquery/PHP/POST data in sequence. Button On Click Function: function Delete_ID(clickBtnValue,clickBtnID,clickBtnName) { var my_data = {& ...

javascriptphphtmljquery

Setting the percentage height of parent and child divs in a precise manner

Trying to work through this without causing chaos. I have a container div containing three floated left child divs, with the container div set to 100% height like so: .Container { height: 100%; min-width: 600px; overflow-y: hidden; } One of the child divs ...

javascriptjquerycsshtml

Consistently adjusting the size of a <textarea> across various browsers such as IE, FF, Safari, and

My <textarea> needs to fit into a space that is a percentage of the screen size, but I'm encountering some issues with different browsers. In FireFox, I am able to achieve good results by setting the CSS properties as follows: #container { width ...

csscross-browsertextarea

The Ajax request is functioning perfectly, but only on the index page

Utilizing a mobile app template within the Framework7 framework for Cordova app development requires making ajax requests on each page to fetch data from a PHP web service. While an ajax request in index.html functions properly, replicating the same reques ...

jqueryajaxcordovacordova-3

How can I create a loop to iterate through form/input files with varying titles?

Looping through input files with different titles Hello, I am trying to figure out how to loop through an input file with different titles. Each input file has a unique title, such as Safety Data Sheet, Certificate, etc. This is my current code: $titles ...

phphtmlformsloopsforeach

Retrieving the ID of a div element using jQuery from a string

Greetings! I have encountered an interesting challenge while working within a jQuery foreach loop. Within this loop, I am retrieving a div element in the form of a string. The string contains a div with an id specified as <div id="div1"> Some text& ...

jquery

ajaxSubmit uploadProgress feature is failing to respond

The issue I am encountering involves the $(a).AjaxSubmit function of jQuery.Form, specifically in relation to the UploadProgress option. Below is the code I am using: $("#ifrm").contents().find("form").ajaxSubmit({ data: { " + datos + " }, target: ...

jqueryajax