Dynamically update CSS class properties with another

I have incorporated a bootstrap CSS tooltip class that is defined as follows:

    .tooltip{display:none;color:#000;text-align:left;}
    .tooltip.in{opacity:0.9;z-index:1030;height:auto;display:block}
    .tooltip.top{margin-top:-10px;text-align:center}
    .tooltip.top{margin-top:-10px;text-align:center}
    .tooltip.right{margin-left:10px} 
    ...

I am looking to create variations of the .tooltip class such as Red, Blue, Orange, and more.

The classes I want to create are:

.red-tooltip{display:none;color:red;text-align:left;}
.red-tooltip.in{opacity:0.9;z-index:1030;height:auto;display:block}
.red-tooltip.top{margin-top:-8px;text-align:center}
.red-tooltip.top{margin-top:-7px;text-align:center}
.red-tooltip.right{margin-left:6px}

.blue-tooltip{display:none;color:blue;text-align:left;}
.blue-tooltip.in{opacity:0.9;z-index:1030;height:auto;display:block}
.blue-tooltip.top{margin-top:-18px;text-align:center}
.blue-tooltip.top{margin-top:-27px;text-align:center}
.blue-tooltip.right{margin-left:6px}

Is there a way to dynamically change the content of .tooltip using .blue-tooltip?

Can this be achieved using jQuery?

jquerycsstwitter-bootstrap

Answer №1

To change the class of an element to another one, you can achieve it by using this line of code:

$('.tooltip').toggleClass('tooltip blue-tooltip');

This code snippet will switch all elements with the class of .tooltip to have the class of blue-tooltip.

If you want to specifically set the color to blue, red, or any other color, make sure to be more precise in your selector.

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

Problem with CSS: The background image is not showing up in Google Chrome, causing the drop-down list to display incorrectly

I have a developed application that needs to function properly on all browsers, with special emphasis on Chrome. Within the application, there is a dropdown list styled using the CSS below: .ddlStyle{ background-image: url("../Images/navigation_bg.jpg ...

asp.netcss

Sharing data with external domains and retrieving HTML output using JavaScript

When a browser sends a POST request and expects an HTML page result from JavaScript, problems arise if there is no Access-Control-Allow-Origin in the server response. Unfortunately, changing anything on the server side is not an option. If a human clicks ...

javascriptjqueryhtmlasp.netajax

The Ladda spin animation continues spinning for an additional second after the stop() function is called

I employ the ladda spinner in this manner: var l = Ladda.create(document.getElementById('ladda-test')); l.start(); l.stop(); console.log('ladda is stoped'); The issue I am facing is that following the execution of l.stop(), the animat ...

javascriptjquerytwitter-bootstrap

creating dynamic data objects in ajax calls

https://jsfiddle.net/c7n34e3x/1/ from data, data1, and data2, only data is functioning, but it lacks dynamism. This method works as intended. var settings = { "async": true, "crossDomain": true, "url": "https://domain/api/v2/playlists/", ...

javascriptjqueryajaxmultidimensional-array

sending an array from one CodeIgniter view to another view via Ajax

In the following code segments of my application, myArray is an array where each element contains a few objects that I need to use in a second view. When I use alert(myJSON);, I am able to see the array in the alert window. However, when the view loads, i ...

javascriptphpjqueryajaxcodeigniter

Guide on How to Upload Huge Files Using a Single Connection in JavaScript

As I work on writing some HTML/JS code to enable the uploading of large files (multi-GB) to a remote server, I am facing some challenges. In the past, we relied on a flash uploader that sent a file in a single network request. However, using flash has now ...

javascriptjqueryajaxnetworkingfile-upload

Unexpected Error Causing Failure in jQuery Ajax Call

My jQuery ajax call is encountering an undefined error. Here is my JavaScript code snippet: $.ajax({ type: "POST", url: "Data/RealTime.ashx", data: "{}", contentType: "application/json; charset=utf-8", dataType: "json", timeout: 15000, ...

asp.netjqueryajaxashxgeneric-handler

Obtain the breakpoint value from Bootstrap 5

We have recently updated our project from Bootstrap 4 to Bootstrap 5. I am trying to retrieve the value of a breakpoint in my TypeScript/JavaScript code, which used to work in Bootstrap 4 with: window .getComputedStyle(document.documentElement) .g ...

javascriptcssbootstrap-4bootstrap-5

The alert dialog does not appear when clicking on "a"

Attempting to retrieve the ID of the clicked element using jQuery has proven unsuccessful for me. Below is the jQuery code I am working with: <script> $(function(){ $("a.step").click(function(){ var id = $(this).attr('id'); ...

jqueryhtml

What is the best way to place text alongside a shape?

I'm attempting to place text beside the circular shape. HTML <div class="row"> <div class="col-sm-2"> <span><div class="circle"></div></span><p>available</p> </div> </div> C ...

htmlcsstwitter-bootstrap-3

My DIV elements are not responding to the widths I set for them. What could be the issue?

Recently, I've been delving into the world of Flex to experiment with some unique layouts. However, I encountered an issue where my divs were not recognizing widths as expected. I attempted to set the first div of each row to 5% width so they would ...

htmlcssflexbox

Java - openpdf - Splitting words using hyphens

We are currently utilizing openpdf 1.3.26 template 2.1 to create PDFs from HTML and CSS. Within our coding, there is a div element styled as follows: .text-block{ display:block; text-align:justify; word-wrap: break-word; ...

javacsspdfhyphenationopenpdf

Implementing the disabled style for an ASP.net dropdownlist

Imagine I have an ASP.net dropdownlist set up like this: <asp:DropDownList ID="ddOwnershipDocumentType" class="msbdd" runat="server"> </asp:DropDownList> Let's take a look at the style definition for msdbdd: .msbdd { font-family: WM ...

cssasp.netwebforms

Adjust the dimensions of the bootstrap dropdown to match the dimensions of its textbox

The second textbox features a bootstrap dropdown with extensive content that is overflowing and extending to other textboxes below it. I am looking for a way to resize the dropdown to fit the size of its corresponding textbox. UPDATE: I want the dropdown ...

javascripthtmlcssbootstrap-5

Enhance your theme property in Styled Components by incorporating numerous style properties

Currently, I am delving into the world of styled components for a fresh project and exploring the theming capabilities it offers. I am finding it challenging to determine the best practice for adding multiple style properties to a single object, essentiall ...

cssreactjsreact-nativestyled-components

Do the values returned by window.screen.width and height represent CSS pixels or physical screen pixels?

After exploring the API named screen and visiting this documentation link, my initial anticipation was that I would receive information regarding actual screen size pixels. https://developer.mozilla.org/en-US/docs/Web/API/Screen/width https://i.sstatic.n ...

javascriptcssbrowsercross-browserpixel

Using a JavaScript loop to modify the color of the final character in a word

I am curious to find out how I can dynamically change the color of the last character of each word within a <p> tag using a Javascript loop. For example, I would like to alter the color of the "n" in "John", the "s" in "Jacques", the "r" in "Peter" ...

javascripthtmlcss

Another choice for object-fit:contain workaround for IE

Is there an alternative option to object-fit: contain that is compatible with Internet Explorer? Below is a snippet of my code: .cbs-Item img { height: 132px ! important; width: 132px ! important; object-fit: contain; <div class="cbs-Ite ...

javascripthtmlcss

Strategies for Efficiently Caching AJAX Responses to Minimize Further HTTP Requests

Recently, I implemented a tabbed-layout on my website where each tab leads to a different page. However, I am looking for a way to prevent a new HTTP post call every time the user switches between tabs. Ideally, I would like to find a JS-based solution t ...

jqueryajax

Font Awesome icons may not display in HTML

Hey there, I'm struggling to get checkbox icons and a plus symbol to appear on my checkbox tags on my website. I added this CSS code to the main .css file of the page, but unfortunately the icons are not displaying. Here is the CSS snippet that includ ...

htmlcssfont-awesome