Modifying the color of the tooltip arrow in Bootstrap 4: A step-by-step guide

How can I change the arrow color of the tooltip using Bootstrap 4? Here is my current code:

HTML:

<div class="tooltip-main" data-toggle="tooltip" data-placement="top" data-original-title="Service fee helps Driveoo run the platform and provide dedicated customer support"><span class="tooltip-qm">?</span></div>

JS:

$(function () {
$('[data-toggle="tooltip"]').tooltip({
  trigger :'click'
})  
})

CSS:

/* TOOLTIP */
.tooltip-main {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  font-weight: 700;
  border: 1px solid #737373;
  color: #737373;
  float: left;
  margin: 4px 0px 0px 5px;
  cursor: pointer;
}
.tooltip-qm {
  float: left;
  margin: -2px 0px 3px 4px;
  font-size: 12px;
}
.tooltip-inner {
  max-width: 236px !important;
  height: 76px;
  font-size: 12px;
  padding: 10px 15px 10px 20px;
  background: #FFFFFF;
  color: rgb(0, 0, 0, .7);
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  text-align: left;
}
[data-placement="top"] + .tooltip > .tooltip-arrow {
  border-top-color: #FFF !important;
}
[data-placement="right"] + .tooltip > .tooltip-arrow {
  border-right-color: #8447cf;
}
[data-placement="bottom"] + .tooltip > .tooltip-arrow {
  border-bottom-color: #8447cf;
}
[data-placement="left"] + .tooltip > .tooltip-arrow {
  border-left-color: #8447cf;
}

I have tried using

.tooltip-inner

I have also tried

[data-placement="top"] + .tooltip > .tooltip-arrow

However, I am unable to get it to work as expected. Can someone assist me with this issue?

Attached layout for reference:

https://i.stack.imgur.com/a7WS2.png

javascripthtmlcsstwitter-bootstrapbootstrap-4

Answer №1

make sure the background: #fff !important and 

color: rgba(0, 0, 0, .7) !important;
properties have !important added to them within the .tooltip-inner selector

$(function () {
  $('[data-toggle="tooltip"]').tooltip({
    trigger :'click'
  })  
})
/* TOOLTIP */
.tooltip-main {
width: 15px;
height: 15px;
border-radius: 50%;
font-weight: 700;
border: 1px solid #737373;
color: #737373;
float: left;
margin: 4px 0px 0px 5px;
cursor: pointer;
}

.tooltip-qm {
float: left;
margin: -2px 0px 3px 4px;
font-size: 12px;
}

.tooltip-inner {
max-width: 236px !important;
height: 76px;
font-size: 12px;
padding: 10px 15px 10px 20px;
background: #fff !important;
color: rgba(0, 0, 0, .7) !important;
box-shadow: 0 1px 3px rgba(0,0,0,0.3);
text-align: left;
}

/* for arrow color */
.arrow::before{
  border-bottom-color:red!important
}

[data-placement="top"] + .tooltip > .tooltip-arrow {
border-top-color: #FFF !important;
}

[data-placement="right"] + .tooltip > .tooltip-arrow {
border-right-color: #8447cf;
}

[data-placement="bottom"] + .tooltip > .tooltip-arrow {
border-bottom-color: #8447cf;
}

[data-placement="left"] + .tooltip > .tooltip-arrow {
border-left-color: #8447cf;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<div class="tooltip-main" data-toggle="tooltip" data-placement="top" data-original-title="Service fee helps Driveoo run the platform and provide dedicated customer support"><span class="tooltip-qm">?</span></div>

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

Additionally, update the arrow color with the following code:

.arrow::before{
  border-bottom-color:red !important;
}

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

Looking to switch from using HTTP to HTTPS in Node.js on localhost... encountering a few error messages

I'm facing an issue with integrating my code into the entire localhost project "app." It works fine with a simple implementation: https.createServer(options) But when I try to run it within the "app" project using the following setup: const server = ...

javascriptnode.jsexpress

Organizing elements in JavaScript

By utilizing d3.nest, I've organized this list through element grouping from another list. array = [ {key: "6S", values: [{Id: "1234a", ECTS: 3}, {Id: "1234b", ECTS: 3}]}, {key: "7S", values: [{Id: "1534a", E ...

javascriptarrays

Expanding iframe elements

I am having difficulty adjusting the size of the iframe content (within a fixed-sized iframe). Essentially, I would like the content to scale smaller or larger as if the browser's zoom function was being used. Through my CSS experiments, it seems achi ...

javascriptcssiframe

Changing the scroll ball's height using CSS

Can the scrollbar height be adjusted in this section? I've tried using overflow-y:auto, but it seems to start from the header and extend all the way to the bottom. When I scroll, the header moves along with it. Header needs fixing Scrollbar height a ...

htmlcssscrollbar

Unable to change background-image as intended

Here is an example of my HTML code with an initial background image: <div id="ffff" style="width: 200px; height: 200px; background-image: url('/uploads/backroundDefault.jpg')">sddsadsdsa<br>dffdsdfs</div> Everything seems to b ...

javascriptjqueryhtmlcss

Creating a WordPress Infographic: How to Design a "Wide" Graphic

I have a question for those who are experienced with infographics. I'm in the process of getting an infographic designed for my blog and I've noticed that some websites have a feature that allows the infographic to expand to full width when you c ...

phpcsswordpress

Enhance video playback by eliminating accidental scrolling through the space bar

When using a video player, I always prefer to pause it by pressing the spacebar. However, this function is not working as expected. The issue at hand is that instead of pausing the video, pressing the space bar causes the page to scroll down unexpectedly ...

javascripthtmlcssvideoscroll

A tutorial on allowing a background element to capture the click event triggered by a foreground element

Within a container div, I have a background and foreground div. I want the click event on the foreground div to be passed through to the background div for handling the event. How can this be achieved in Angular 2+? Here is an example structure of my div ...

htmlcss

What steps are necessary to create an npm package utilizing three.js without any dependencies?

I have a challenge - I am trying to create an npm package that generates procedural objects for three.js. The issue I'm facing is how to properly include three.js in my code. I attempted to establish a dependency and use something like const THREE = r ...

javascriptnode.jsnpmthree.js

What is the best way to remove text from a box when a user clicks on it?

After successfully placing G in the selected box upon clicking it, I now want to work on removing it when clicked again. I'm encountering an issue with my current code - can anyone help me identify what's wrong and suggest a solution? Below is ...

javascriptreactjsdebugging

Header width does not fully occupy the available space

I'm working on a table that includes a div element for adding a header to it. <div class="table-responsive"> <table class="table"gt; <thead> <div class="topPic"><span><i class="fa fa-tree fa-2x"></i>< ...

htmlcssresponsive-design

The folder serves as a module, however, the index.js file within the folder only consists of a few require

Currently, I am delving into the source code of hexo, a project built on top of node.js. Specifically, I came across a file named init.js: if (results.config){ require('./plugins/tag'); require('./plugins/deployer'); require('./pl ...

javascriptnode.js

Developing end-to-end tests utilizing the selenium-webdriver library with WebDriverJS for node.js applications

I am currently in the process of migrating tests from webdriver and Java to webdriverjs, and I have a question regarding the functionality. Can someone help me understand why this code snippet works? driver.get('http://www.google.com'); driver.f ...

javascriptselenium-webdriver

Display a concealed text box upon clicking BOTH radio buttons as well as a button

Below is the HTML code for two radio buttons and a button: <body> <input data-image="small" type="radio" id="small" name="size" value="20" class="radios1"> <label for=&qu ...

javascripthtmljqueryradio-button

How to make the dropdown menu in Material UI Select have a horizontal scroll bar?

I've run into an issue in my project with the material ui Select component. The dropdown contents are too long and don't fit properly. To solve this problem, I tried adding a horizontal scroll to the dropdown menu by setting OverflowX property i ...

javascriptmaterial-ui

I have to make sure not to input any letters on my digipas device

There is a slight issue I am facing. Whenever I input a new transfer of 269 euros with the bank account number BE072750044-35066, a confirmation code is required. The code to be entered is 350269. https://i.stack.imgur.com/YVkPc.png The digits 350 corres ...

javascriptangulartypescript

Guide on retrieving just the time from an ISO date format using JavaScript

let isoDate = '2018-01-01T18:00:00Z'; My goal is to extract the time of 18:00 from the given ISO date using any available method, including moment.js. ...

javascript

I am encountering a problem with IE11 where I am unable to enter any text into my

When using Firefox, I can input text in the fields without any issues in the following code. However, this is not the case when using IE11. <li class="gridster-form" aria-labeledby="Gridster Layout Form" alt="Tile Display Input column Input Row ...

javascripthtmlcssinternet-explorerinternet-explorer-11

How can I change the orientation of a cube using d3js?

Seeking guidance on creating an accurate chart using d3js How can I rotate the SVG to display the opposite angle as shown in the image? Any recommended resources for achieving this desired result would be greatly appreciated. The provided code only disp ...

javascriptnode.jsd3.js

The overlay of the background image is excessively oversized

After implementing the following CSS to showcase a background image: height: 90%; /* or any other value, corresponding with the image you want 'watermarked' */ width: 90%; /* as above */ background-image: url('<?php echo "study/".$_SESS ...

androidhtmlcss