Modify the background color of a tooltip using a different class

I have a question regarding the version of Bootstrap being used in my package.json file:

{
  "_from": "bootstrap@^4.5.0",
  "_id": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="34565b5b40474046554474001a021a04">[email protected]</a>",
...
}

Specifically, I want to change the background color of tooltips on certain pages by adding a new class. Here is the HTML code snippet:

<a href="#" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom" class="red-tooltip">Tooltip on bottom</a>

Although I successfully changed the background color without the "red-tooltip" class using CSS, adding it in front of the relevant lines did not work. Here is the CSS code I used:

.tooltip.show {
  opacity: 1;
}

.tooltip-inner {
  background-color: #ff0000;
  box-shadow: 0px 0px 4px black;
  opacity: 1 !important;
}

.tooltip.bs-tooltip-right .arrow:before {
  border-right-color: #ff0000 !important;
}

.tooltip.bs-tooltip-left .arrow:before {
 border-left-color: #ff0000 !important;
}

.tooltip.bs-tooltip-bottom .arrow:before {
 border-bottom-color: #ff0000 !important;
}

.tooltip.bs-tooltip-top .arrow:before {
 border-top-color: #ff0000 !important;
}

If anyone could provide guidance on how to achieve this with the addition of the ".red-tooltip" class, I would greatly appreciate it.

javascriptcssbootstrap-4tooltip

Answer №1

When utilizing Bootstrap, a new HTML element called "tooltip" is created and attached to the document body independently from the associated a tag. The generated HTML can be viewed at https://getbootstrap.com/docs/4.0/components/tooltips/#markup.

Due to this setup, updating the class in the related a tag does not impact the HTML generated by the tooltip. However, different styles can still be applied in various ways:

  1. Adjust the CSS of the "tooltip". By redefining classes such as .tooltip-inner, you can override the default style (as shown in your code).

  2. Add a class to the body of specific pages, e.g., red-tooltip, and customize the "tooltip" accordingly:

.red-tooltip .tooltip-inner {
  background: red;
}
  1. I personally prefer redefining the HTML template of the "tooltip" in JavaScript. This approach allows for multiple styled tooltips on the same page.

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})
$(function () {
  $('[data-toggle="tooltip-red"]').tooltip({
    template: '<div class="tooltip tooltip-red" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'
    
  })
})
.tooltip-red .tooltip-inner {
  background: red;
}

.tooltip-red .bs-tooltip-top .arrow::before, 
.tooltip-red .bs-tooltip-auto[x-placement^="top"] .arrow::before {
  border-top-color: red;
}
.tooltip-red .bs-tooltip-right .arrow::before, 
.tooltip-red .bs-tooltip-auto[x-placement^="right"] .arrow::before {
  border-right-color: red;
}
.tooltip-red .bs-tooltip-bottom .arrow::before, 
.tooltip-red .bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
  border-bottom-color: red;
}

.tooltip-red .bs-tooltip-left .arrow::before, 
.tooltip-red .bs-tooltip-auto[x-placement^="left"] .arrow::before {
  border-left-color: red;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me (Normal)</a>

<br>
<br>

<a href="#" data-toggle="tooltip-red" title="Some tooltip text!">Hover over me (Red)</a>

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

Uncovering components generated by React JS with BeautifulSoup

My goal is to extract anchor links with the class "_1UoZlX" from the search results on a specific page - After analyzing the page, I realized that the search results are dynamically generated by React JS and not readily available in the page source or HTM ...

javascriptpythonseleniumreactjsbeautifulsoup

Error in Vue component when setting the background image URL

Here is my code snippet that sets the background image for a component: style() { return { "background-image": `url(${require(`../../../assets/images/${this .last_result}.png`)})` }; }, The expected URL should be ../../../assets/images/ ...

javascriptvue.js

Obtain the specific key's value from a new Map state

In my code, I've defined a variable called checkedItems as a new Map(); When I try to console.log(checkedItem), the output is as follows: Map(3) {"1" => true, "1.5" => true, "2" => false} Is there a way ...

javascriptreactjs

Adjust column content to fit width, instead of setting width to 100%

To create columns for the ul, I used flex-direction: column and flex-wrap: wrap. When the elements within the ul are split into multiple columns, each column takes on the width of the widest content in that column. However, if there is only one column, it ...

htmlcssflexbox

The element is unclickable due to being obstructed by another element

https://i.sstatic.net/pomMS.png My task is to click on a button using this code: browser.find_element_by_id('btnSearch') However, the button is being blocked by a div tag with the following attributes: <div id="actionSearch" class="row pull- ...

pythonhtmlcssseleniumselenium-chromedriver

Updating the positions of Mesh objects in Three.js asynchronously

I'm currently working on a Three.js application where I am creating a grid to display various objects. These objects are rendered on the grid based on their positions, which are obtained from data fetched from a REST API that I poll every 300 millisec ...

javascriptthree.js

Erase periods from the text box

Is there a way to remove the dots in the right bottom corner of a textarea without disabling resizing? https://i.sstatic.net/N2zfh.jpg I have seen a solution using the css property resize:none, but I would like to keep the resizing functionality... Are ...

javascripthtmlcsstextarea

Transmit a JavaScript function using JSON

I am working on a server-side Python script that generates a JSON string with parameters for a JavaScript function on the client side. # Python import simplejson as json def server_script() params = {'formatting_function': 'foobarfun&apo ...

javascriptjsonfunctionobject

Achieving a centrally aligned flex container with left-aligned flex items

My goal is to center the flex items, but when they go onto a second line, I want item 5 (from image below) to be positioned under item 1 instead of centered in the parent container. https://i.sstatic.net/GhD1E.png Here's a sample of my current setup ...

htmlcssflexbox

Changing profile picture using React UI framework

I'm just starting with react so please bear with me if I make any mistakes. I am trying to figure out how to update a user's profile picture. I need to create a clickable image (with the variable name "avatar" in the code) that will show a previe ...

javascriptnode.jsreactjsexpress

Can you upload a file using the MaterialUI Upload Button in React and then send it to Firestorage?

Hi everyone! I recently implemented MaterialUI's Upload Button in my project, which you can find here: https://material-ui.com/components/buttons/ Below you will see the code snippet where I have integrated this button and now I am trying to upload a ...

javascriptreactjsreact-hooksmaterial-uifirebase-storage

Current recommended method for updating innerHTML with properly formatted text?

My understanding is that using innerHTML on an element can be risky, as malicious users could potentially inject harmful content such as <script> tags. This question shows there are multiple alternative tags, some of which are non-standard. In my s ...

javascripthtml

I'm experiencing a roadblock due to ng-submit not functioning as expected, failing to execute when clicked

I'm currently enrolled in an online course and I've hit a roadblock with one of my assignments. The assignment involves a form with a submit button that triggers certain code upon clicking. However, when I click the submit button, the code doesn& ...

javascriptangularjsformscontrollerangular1.6

Pressing ctrl+s will submit TinyMCE+JEditable

Updated: June 8th, 2011 Please check out the solution provided in the Answer section below. Updated: May 5th, 2011 I am currently facing a challenge where I need to trigger the JEditable submit button after hitting Ctrl+S. Thariama has already demonstr ...

javascriptjqueryeventstinymcejeditable

Tips for emphasizing specific sections of text in CodeMirror utilizing substring positions

I am currently utilizing CodeMirror () as a text editor with additional functionalities. One of these features includes highlighting specific words or groups of words based on their positions within the original string. I have an external structure that st ...

javascriptcodemirrorcodemirror-modes

adjust the webpage to be optimized for the size of the screen

Looking to adjust the webpage layout so that it fits perfectly on the screen without the need for vertical or horizontal scrolling. Additionally, we want the image to be centered. See below for the current code snippet: #copyright { top: 0px; right: ...

htmlcss

SVG set to fill currentColor but does not dynamically change in high contrast mode

I'm currently working with in-line SVGs on my website. Here's an example: svg { fill: currentColor; } <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" height="25px" viewBox="-13 0 120 30" width="74px"> < ...

htmlcsssvghigh-contrast

Problem with autocomplete functionality in Angular Material's md-contact-chips

Having some trouble with the autocompletion feature of md-contact-chips. I want to capture the $query as soon as someone starts typing. HTML <md-contact-chips ng-model="members" md-contacts="querySearch($query)" md-contact-name="fullname" ...

javascriptangularjsautocompleteangular-material

Ways to display the chosen value based on the item's index using Javascript in Angular

If you want to view the complete code, just click on this link. I have identified the main issue here. Check out the code here: https://stackblitz.com/edit/test-trainin-2?file=src/app/app.component.html The problem is when you interact with the green bal ...

javascripthtmlangular

Trigger an event when the menu is outside the viewport and then lock the menu to the top of the viewport

I am trying to create a menu element that remains fixed at the top of the browser viewport as the user scrolls, ensuring it is always visible. In my webpage layout, the menu sits below some text in the header initially. Once the user scrolls past the heade ...

javascriptjqueryhtmlcss