Changing the color of a tooltip for a specific element using Bootstrap 4

Is there a way to customize the tooltip background-color for icons with the classes "alert-danger" to red and "alert-success" to green using the following CSS commands:

.alert-danger + .tooltip > .tooltip-inner {
    background-color: red !important;
}
.alert-success + .tooltip > .tooltip-inner {
    background-color: green;
}
.alert-danger + .tooltip > .tooltip.bs-tooltip-top .arrow::before{
    border-top-color: red;
}
.alert-success + .tooltip > .tooltip.bs-tooltip-top .arrow::before{
    border-top-color: green;
}

I came across this solution on a StackOverflow thread.

The issue I'm encountering is that whenever I hover over the icon, Bootstrap code generates a new div element at the bottom of the body tag, causing my custom code not to work as expected.

Any suggestions on how to resolve this problem?

Edit

This is the HTML snippet in question:

<i class="far fa-check-circle alert-success" data-toggle="tooltip" data-original-title="Sim"></i>
javascriptjqueryhtmlcsstooltip

Answer №1

When working with CSS selectors, it's important to understand the difference between using the + selector and the ~ selector. The former selects the adjacent sibling, while the latter selects any next sibling, not just the immediate one. However, success with these selectors depends on the structure and complexity of your HTML code.

For a clearer understanding of how CSS selectors operate, it is recommended to refer to resources like MDN Web Docs.

A more effective solution might involve changing the container for each tooltip. By default, tooltips are rendered within the body, but you can specify a different container using the data-container attribute on each icon element:

<i
  class="far fa-check-circle alert-success"
  data-toggle="tooltip"
  data-original-title="Text"
  data-container=".alert-success">
</i>
<i
  class="far fa-check-circle alert-danger"
  data-toggle="tooltip"
  data-original-title="Text"
  data-container=".alert-danger">
</i>

This adjustment will ensure that tooltips appear inside their respective icon elements rather than in the body. Make sure to update your CSS accordingly to style the tooltips effectively.

.danger-tooltip .tooltip .tooltip-inner {
    background-color: red;
}
.success-tooltip .tooltip .tooltip-inner {
    background-color: green;
}
.danger-tooltip .tooltip .arrow::before{
    border-top-color: red;
}
.success-tooltip .tooltip .arrow::before{
    border-top-color: green;
}

If you require further specificity, consider assigning unique class names to each icon element and utilizing them as containers for the tooltips.

Answer №2

If you're looking to achieve this using just CSS, make sure to include the data-container=".alert-success" attribute. This will ensure that the tooltip div is appended inside the designated .alert-success class area.
Here's a snippet to guide you through:

$(function () {
  $('[data-toggle="tooltip"]').tooltip();
});
.alert-danger .tooltip > .tooltip-inner {
  background-color: red;
}
.alert-success .tooltip > .tooltip-inner {
  background-color: green;
}
.alert-danger > .tooltip.bs-tooltip-top .arrow::before{
  border-top-color: red;
}
.alert-success > .tooltip.bs-tooltip-top .arrow::before{
  border-top-color: green;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

<div class="container my-5 text-center">
  <div class="row">
    <div class="col-sm-12">
      <i class="fa fa-times-circle alert-danger" data-container=".alert-danger" data-toggle="tooltip" title="Tooltip Danger"></i>
      <i class="fa fa-check-circle alert-success" data-container=".alert-success" data-toggle="tooltip" title="Tooltip Success"></i>
    </div>
  </div>
</div>

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

Ways to embed an HTML file into another HTML document

I have been attempting to include a footer.htm file in my index.htm document without success. Below is the code I am using. index.htm <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.d ...

html

Raycasting for collision detection is not very precise

I am facing a challenge in my project where I have multiple irregular shapes like triangles, trapezoids, and other custom designs in a 2D scene all located on the Y=0 axis. I am currently working on writing code for collision detection between these shapes ...

javascriptthree.jsraycasting

Automatically populate textboxes with database information based on selected combobox item without the need to refresh the page

I would like to implement a feature where textboxes are automatically filled from a database when a user selects an option from a combo box. This can be achieved using jQuery or JavaScript in PHP. Once a user selects an element, the corresponding text sh ...

javascriptphpjqueryautocomplete

Implementing conditional styling in Vue.js using v-bind based on specific Bootstrap breakpoints

Is there a way to dynamically assign styles based on different bootstrap breakpoints using v-bind style directive with vue? I'm encountering an error in the console that says "Whitespace was expected." <div class="footer" :style="{$b ...

javascriptvue.jsif-statementbootstrap-4vue-directives

JavaScript Issue Causing Jquery Carousel Dysfunction

I am having trouble with the slider I created using JS Fiddle. The link to the slider is not working and I need some assistance. Click here for the slider <div class="row"> <div id="myCarousel" class="carousel slide vertical"> &l ...

javascriptjqueryhtmlcss

Reorder the Polymer dom-repeat element following a modification in the child component's value

My Polymer dom-repeat list is working fine on the initial value sorting for the children. However, when I update a value within a child element, the sort order of the list does not reflect the changes. What is the best way to achieve this? <body> ...

javascriptsortingpolymerdom-repeat

Transferring data from JavaScript to PHP for geolocation feature

Hello everyone, I'm looking to extract the longitude and latitude values from my JavaScript code and assign them to PHP variables $lat and $lng. This way, I can retrieve the city name and use it in my SQL query (query not provided). Below is the scrip ...

javascriptphphtml

Is there a way to align the input fields vertically?

Here is the link to my code on jsFiddle input { vertical-align: top; /* Not working */ } I am struggling to align the submit button under the input fields. Can someone provide assistance with this issue? ...

htmlcss

Tips for customizing the appearance of the react-stripe-checkout form

Could someone please provide guidance on applying custom styles to the react-stripe-checkout form component, such as changing the background color? Visit this link for more information ...

javascriptcssreactjsformsstripe-payments

Display an image with HTML

My current project involves creating a chrome extension that will display a box over an image when hovered, while also zooming the image to 1.5 times its original size. In my research, I came across a similar example. .zoomin img { height: 200px; wi ...

javascriptjquerycsshtml

Combine the text of the button onto a single line

It seems like my button text appears fine on Safari, but in Google Chrome the issue arises. When you first arrive at the button, everything looks okay. However, after navigating through more posts and encountering the load more button again, the text gets ...

csswordpressbuttonalignmentwidth

Only allowing designated email addresses to authenticate using Gmail Oauth

Is there a way I can limit logins by doing the following? I'm facing an issue where the page keeps reloading constantly after logging in once. function onSignIn(googleUser) { var profile = googleUser.getBasicProfile(); console.log('Name: ...

javascripthtmlgmail

What is the method for verifying PHP information using jQuery AJAX?

On my PHP page, I have an else statement that filters data from a SQL database based on user input. Below is some pseudo code: NextPage.php //Include database configuration file include('../dbConfig.php'); if(isset($_POST['pageno']) ...

javascriptphpjqueryajaxpagination

Arrange elements in a vertical layout and align them to the left when they exceed the boundaries of their container

I am seeking a solution for laying out my design, similar to the one shown in this image Essentially, I have a container with a fixed height of 300px. I want to display a list vertically with each item taking up a width of 33%. If the list becomes too lon ...

htmlcss

Issue with combining overflow-x, Firefox, and JavaScript

In Firefox, an issue arises that does not occur in other browsers. To see the problem in action, please visit this example page: -removed- Try selecting a page other than the home page. The window will scroll to your selection. You can then scroll down u ...

javascriptjquerycssfirefoxscrollto

Troubleshooting Node Commands malfunctioning following NodeJS update

I have encountered an issue while trying to update my node version. I deleted the nodejs file from the ProgramFilesx86 folder and then used the Windows installer to install the latest version. However, when I attempt to initialize a node project or use npx ...

javascriptnode.jsnpmpackage.jsonnpx

Sharing information with Django through Ajax and jQuery

I'm facing an issue with posting html5 geolocation data to the django admin backend. I've managed to display the latitude and longitude on the html page but can't seem to successfully submit the data to django. I suspect there might be a pro ...

javascriptjqueryajaxdjangogeolocation

The .load() function is not functioning properly when trying to access content

<!DOCTYPE html> <html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript"> $(document).rea ...

jqueryajax

The issue with Jquery .html() function causing spaces to disappear between words

When utilizing jQuery's .html() property to populate a select box, I encountered an issue where the spaces between words were being trimmed down to just one space. Despite including multiple spaces in the option, it would always resolve to a single sp ...

javascripthtmljquery

What strategies can be employed to preserve certain fields while dynamically populating others using JSON in a form?

Currently, I am utilizing jquery Populate to dynamically fill a field with the information from the previous Firstname and Surname fields within the same form. However, an issue arises when using the Populate javascript function: $(formname).populate(newfi ...

javascriptjqueryjsonformspopulate