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

how to make a div scroll after reaching a specific pixel distance

Hi there! I'm working with a DIV that has a width of 1600px. I'm wondering if there's a way to implement a feature within the DIV that fixes the first 200px and adds an automatic scroll for the rest of the content. Do you know of any CSS tr ...

jqueryhtmlcss

Creating a new Express JS application

I've encountered an issue with my express application. When I run the server and navigate to localhost in my browser, the index page loads but without the image that should be displayed. The browser console shows a 404 error for the image URL. GET ht ...

javascriptexpress

Ways to verify the timeframe between two specific dates

Having two distinctive arrays: accomodation: [ { id: 1, name: "Senator Hotel Fnideq", address: "Route de Ceuta, 93100 Fnidek, Morocco", checkin: "September 1", fullCheckinDate: "2021-09-01", ...

javascriptarraysvue.jsobjectdayjs

Creating a shared observable array in KnockoutJs to be used for multiple select elements

When an employer needs to assign a specific employee and premium amount, they can click on the "Add Employee" button to reveal another form with a dropdown menu of employees and an input field for the premium amount. <select> <option>John& ...

javascriptselectknockout.jsshare

Randomly swap images in HTML when a button is clicked

In order to change images randomly on mouse click, I came across this solution: <SCRIPT LANGUAGE="Javascript"> function banner() { } ; b = new banner() ; n = 0 b[n++]= "<A HREF='index.html'><IMG SRC='images/pic1.jpg'> ...

jqueryhtmlcssimage

JavaScript function to substitute instead of writing

function replaceHTML(a,b) { var x = document.getElementById("canvas_html").contentDocument; x.innerHTML = b; } Although the current function works fine, I would like to update it to directly replace the existing content instead of writing new con ...

javascripthtml

What is the best approach for retrieving values from dynamically repeated forms within a FormGroup using Typescript?

Hello and thank you for taking the time to read my question! I am currently working on an Ionic 3 app project. One of the features in this app involves a page that can have up to 200 identical forms, each containing an input field. You can see an example ...

javascriptformstypescriptionic2

Sending data using jQuery's AJAX feature

Here is an example of the code I have: var loadUrl = 'test.php'; var dataObject = { category_id: category_id, grade_val: grade }; jQuery.ajax({ type: 'POST', url: loadUrl, data: dataObject, dataType: 'html', ...

javascriptajaxjquery

Having trouble sending an array from Flask to a JavaScript function

As a newcomer to web development and JavaScript, I'm struggling to pass an array from a Flask function into a JavaScript function. Here's what my JS function looks like: function up(deptcity) { console.log('hi'); $.aja ...

javascriptpythonhtmlajaxflask

Begin by introducing a fresh attribute to a JSON entity

Looking for help with modifying JSON data: var myVar = { "9":"Automotive & Industrial", "1":"Books", "7":"Clothing" }; I need to insert a new element at the beginning of the array, resulting in this: var myVar = { "5":"Electroni ...

javascriptjsonobject

Steps to turn off fancybox for mobile and show the full image instead

In this scenario... I am seeking a way to deactivate fancybox functionality on mobile devices. I have already discovered one method to disable it... And now I want to directly show the large image in the a href="xxx_large.jpg" instead of using the img src= ...

javascriptjquerycssfancyboxfancybox-2

How can I create a computed field in TypeORM by deriving its value from other fields within the same Entity?

My goal is to implement a 'rating' field in my User Entity. Within the User Entity, there exists a relationship with the Rating Entity, where the User has a field called ratingsReceived that eagerly loads all Ratings assigned to that User. The & ...

javascriptsqltypescriptsequelize.jstypeorm

<ol><li>Arranges elements in a peculiar way if the image is aligned to the left</li></ol>

Explore this comprehensive presentation on combining PDFs online. In this blog post, I have encountered two instances of <ol><li> formatting. The first one is styled properly using the following CSS: .post_content ul, .post_content ol ...

cssimagehtml-listsalignment

I have been tirelessly attempting to resolve this issue, yet all my efforts have proven futile thus

Encountering an issue with web packs and nextjs. import NextDocument, { Html, Head, Main, NextScript } from 'next/document' import theme from '../libs/theme.js' export default class Document extends NextDocument { render() { retu ...

javascriptnext.js

Personalizing CSS for a large user base

My website allows users to choose themes, customize background, text, and more. I am seeking the best method to save all of these changes. Is it preferable to use a database read or a file read for this purpose? Any recommendations are greatly appreciate ...

csscustomization

Glistening tabPanel and Analytics by Google

I recently completed a comprehensive tutorial here that delves into the intricacies of Google Analytics. Despite grasping the concepts explained in the tutorial, my understanding of jQuery remains at ground zero. In my ShinyApp, I utilize multiple tabPanel ...

javascriptjqueryrgoogle-analyticsshiny

What is the best way to generate an array from JSON data while ensuring that the values are not duplicated?

Upon receiving a JSON response from an API, the structure appears as follows: { "status": "success", "response": [ { "id": 1, "name": "SEA BUSES", "image": null }, { "id": 2, ...

javascriptarraysjsonloopsfor-loop

Using webpack to bundle node_modules into your application

I am facing an issue while trying to load some modules like: moment echarts In my package.json file, I have the following versions specified: "echarts": "^3.1.10" "moment": "^2.14.1" However, I am encountering the errors below: VM2282:1 Uncaught Ref ...

javascriptnode.jsangularwebpack

Do not directly change a prop - VueJS Datatable

Just starting out on Vue JS and encountered an issue while trying to create a Data Table by passing parent props to child components. An Error Occurred: [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent ...

javascriptvue.jsvuejs2

Retrieving Browser URL using Node.js

Currently, I am trying to extract the browser URL from a user who has integrated my external JavaScript file into their website. The process involves them including the JS file, which triggers an Ajax call using jQuery to communicate with my Node server. ...

javascriptajaxnode.jsurl