Create two unique tooltips with different colors using only CSS

There are 2 tooltips that I want to style differently - one needs to be green, while the other should be red. I have tried various solutions, but so far both tooltips end up having the same color.

$('.fa-edit').tooltip();
$('.fa-trash-alt').tooltip();
.tooltip-inner {
  background-color: #8ABE57 !important;
  color: #fff;
  font-size: 1.2em;
  text-align: center;
  border-radius: .25rem;
  padding: 6px 16px;
  letter-spacing: 1px;
}

.tooltip .arrow:before {
  border-bottom-color: #8ABE57 !important;
  border-top-color: #8ABE57 !important;
}

.tooltip.show {
  opacity: 1 !important;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">



<div class="col-2 actions-edit"><i class="far fa-edit" data-toggle="tooltip" data-placement="top" title="Editar"></i></div>
<div class="col-2 actions-trash"><i class="far fa-trash-alt" data-toggle="tooltip" data-placement="top" title="Eliminar"></i></div>


<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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
cssbootstrap-4twitter-bootstrap-tooltip

Answer №1

For the tooltip you want in red, add a custom class and include some CSS to style it accordingly. Here's a functional example:

$('.fa-edit').tooltip();
$('.fa-trash-alt').data('tooltip-custom-class', 'tooltip-danger').tooltip();

$(document).on('inserted.bs.tooltip', function(e) {
    var tooltip = $(e.target).data('bs.tooltip');
    $(tooltip.tip).addClass($(e.target).data('tooltip-custom-class'));
});
.tooltip-inner {
  background-color: #8ABE57 !important;
  color: #fff;
  font-size: 1.2em;
  text-align: center;
  border-radius: .25rem;
  padding: 6px 16px;
  letter-spacing: 1px;
}

.tooltip .arrow:before {
  border-bottom-color: #8ABE57 !important;
  border-top-color: #8ABE57 !important;
}

.tooltip.show {
  opacity: 1 !important;
}

.tooltip-danger .tooltip-inner {
  background-color: #f00 !important;
  color: #fff;
  font-size: 1.2em;
  text-align: center;
  border-radius: .25rem;
  padding: 6px 16px;
  letter-spacing: 1px;
}

.tooltip.tooltip-danger .arrow:before {
  border-bottom-color: #f00 !important;
  border-top-color: #f00 !important;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">



<div class="col-2 actions-edit"><i class="far fa-edit" data-toggle="tooltip" data-placement="top" title="Editar"></i></div>
<div class="col-2 actions-trash"><i class="far fa-trash-alt " data-toggle="tooltip" data-placement="top" title="Eliminar"></i></div>


<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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

Answer №2

If you take a closer look at their guidelines, you have the ability to create a personalized template for your tooltip. This feature allows you to include a specific class that can be easily styled with CSS.

const settings = {
  template: '<div class="tooltip red" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'
}

Simply insert the settings when setting up your tooltip: $('#example').tooltip(settings)

To learn more about the customizable options, visit the Bootstrap documentation

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

Tips for positioning a div alongside its parent div

I have a unique setup with two nested divs that are both draggable. When I move the parent div (moveablecontainer), the child div (box.opened) follows smoothly as programmed. Everything works well in this scenario. However, when I resize the browser windo ...

htmlcsstypescriptangular6

Ensure that three spans are precisely aligned to occupy a single line

My dilemma is as follows: I have a line within a document that has a set width. Now, there are 3 elements involved - one <a> tag and two <span> tags. The content in the <a> tag varies in width each time it appears on the line. The thi ...

htmlcssresponsive-design

Is there a way to move a placeholder to a small label in the top left corner when an input field is being used?

I've been searching for functional code, but everything I've tried so far hasn't worked. Does anyone have expertise in creating this animation using React? ...

htmlcssreactjsanimationinput

Dynamically modifying the styling of elements within an iframe

In my current project, I encountered a challenge with changing the background color to black and the body text color to white within an iframe. Additionally, all elements that are originally styled with black in an external stylesheet also need to be chang ...

javascripthtmlcssdomiframe

Prevent Border Around Images within a Child DIV

Currently, I am in the process of designing a Tumblr theme and facing the challenge of making my pages visually appealing. One particular issue that is causing me trouble is my desire to have images on individual pages bordered in green with a maximum wid ...

htmlcss

Chrome experiencing conflicts with backstretch when using multiple background images

In order to dynamically apply fullscreen background images in a WordPress site, I am utilizing Backstretch.js along with a custom field. Everything is functioning properly for the body's background image. However, there seems to be an issue with anot ...

javascriptjqueryhtmlcssgoogle-chrome

Close button located in the upper-right corner is partially cut off

My challenge involves placing a close button on the top right corner of a #main div that contains an image of varying or larger size. I need the close button to slightly protrude outside the div using negative margins. The issue is that when I use overflow ...

htmlcss

Issues with spacing in navigation bar

I've been searching and experimenting for hours, but I can't seem to make it work. In my "inline-form," I have a button on the left, an input field in the middle, and a button on the right within a navbar. Everything displays correctly when the ...

htmlcssbootstrap-4

css position:absolute stacked

Looking for a solution, I'm trying to include a side menu (navbar) on my page by using position: fixed. However, I am facing an issue where all the HTML elements I attempt to add are ignoring it. Check out the positioning problem here. ...

htmlcss

Bootstrap is unable to function properly without jQuery, throwing an error message that states: "Bootstrap's JavaScript

Attempting to create a Bootstrap interface for a program. Added jQuery 1.11.0 to the <head> tag, however upon launching the web page in a browser, jQuery throws an error: Uncaught Error: Bootstrap's JavaScript requires jQuery Various attempts ...

jqueryhtmlcsstwitter-bootstraptwitter-bootstrap-3

Hover effects can be applied to CSS tabs

There seems to be a CSS issue on Chrome where the background image is not hiding when clicking on next tabs. I have used the following code: .paymentBank ::after { content: " "; } You can view the live code [here][1] and I have also attached a scree ...

htmlcss

The JavaScript script to retrieve the background color is malfunctioning

I am currently working on developing a highlighting feature for an HTML table that will dynamically change the row colors on mouseover. Below is the code snippet I have been using, but it seems to be experiencing some issues. Any assistance would be greatl ...

javascripthtmlcss

Brick-themed HTML/CSS elements drift away from each other

I'm currently designing an image collage for my website and attempted to use masonry for the layout. However, when I adjust the size of the blocks, they seem to drift apart, creating large gaps between each block. Any suggestions on how to resolve thi ...

javascripthtmlcssmasonry

How can JQuery detect input in the fields?

I have the following HTML code and I am looking to trigger a function based on the input in any of the input fields, regardless of the field number. <input type="text" pattern="[0-9]*" name="code" maxlength="1" au ...

javascripthtmljquerycss

increasing the size of a particular text box above the rest

Just starting out with bootstrap and trying to figure out how to make one text box larger than the others. See my code below: <div class="row"> <div class="col-md-2"> <mat-form-field > <input matInput pla ...

cssbootstrap-4

I was able to resolve the fixed position issue of a button on Safari for iPhone 3G

Here is the setup I have on jsfiddle: http://jsfiddle.net/zZDqH/ Currently, there is a button fixed at bottom:0px. You can scroll up and down the page, and the button will stay at the bottom of the page. However, when testing in Safari on an iPhone 3G ( ...

iphonehtmlcsssafari

"Strategies for selecting the initial child element of the currently active item within a diverse array of car

My carousel slides one item at a time, and I am cloning the items. I am trying to add the "selected" class to the first child of the active class. I originally used https://www.bootply.com/HNtK6pWwFp#, but have since converted it for bootstrap 4. I attem ...

jquerybootstrap-4

Designing a dynamic 1-3 column arrangement with Angular for animated content

Let's discuss the current setup: I am in the process of creating a webpage for an application that includes a navigation bar, a footer, and a 3-column body layout. Initially, only one column is visible. This primary column will contain interactive d ...

angularjscss

Center the form on the page using Bootstrap

My bootstrap login form is currently appearing at the top of the page, but I want it to be centered. <div class="container"> <div class="row text-center"> <div class="col-sm-6 col-sm-offset-3 well offset4"> <div class=""&g ...

cssangularjstwitter-bootstraptwitter-bootstrap-3bootstrap-modal

In-depth CSS Reset for specific tags

Creating a Firefox extension that inserts HTML elements into web pages poses the challenge of ensuring consistent styling across various websites. The CSS rules must be robust enough to override any potential modifications introduced by developers. This ta ...

htmlcssfirefoxreset