Ways to customize the appearance of Bootstrap 4 tooltips

I'm having trouble customizing my Bootstrap 4 tooltip. I want to adjust the background color, height, width, and border, but I can't figure out how to style it to my liking.

Here is the HTML code I am using:

<i class="fa fa-question-circle" href="#" data-toggle="tooltip" title="Cover for any accidental loss or damage to the vehicle caused by natural calamities such as floods, storms, earthquakes, etc." aria-hidden="true"></i>

The tooltip is functioning properly, but I can't seem to change its appearance.

htmlcssbootstrap-4

Answer №1

See the example below showcasing various styles:

HTML:

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Default">Default</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" data-type="primary" title="Primary">Primary</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" data-type="info" title="Info">Info</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" data-type="success" title="Success">Success</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" data-type="warning" title="Warning">Warning</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" data-type="danger" title="Danger">Danger</button>

CSS:

.tooltip.primary .tooltip-inner          { background-color:    #337ab7; }
.tooltip.primary.top > .tooltip-arrow    { border-top-color:    #337ab7; }
.tooltip.primary.right > .tooltip-arrow  { border-right-color:  #337ab7; }
.tooltip.primary.bottom > .tooltip-arrow { border-bottom-color: #337ab7; }
.tooltip.primary.left > .tooltip-arrow   { border-left-color:   #337ab7; }

.tooltip.info .tooltip-inner          { background-color:    #31b0d5; }
.tooltip.info.top > .tooltip-arrow    { border-top-color:    #31b0d5; }
.tooltip.info.right > .tooltip-arrow  { border-right-color:  #31b0d5; }
.tooltip.info.bottom > .tooltip-arrow { border-bottom-color: #31b0d5; }
.tooltip.info.left > .tooltip-arrow   { border-left-color:   #31b0d5; }

.tooltip.success .tooltip-inner          { background-color:    #449d44; }
.tooltip.success.top > .tooltip-arrow    { border-top-color:    #449d44; }
.tooltip.success.right > .tooltip-arrow  { border-right-color:  #449d44; }
.tooltip.success.bottom > .tooltip-arrow { border-bottom-color: #449d44; }
.tooltip.success.left > .tooltip-arrow   { border-left-color:   #449d44; }

.tooltip.warning .tooltip-inner          { background-color:    #ec971f; }
.tooltip.warning.top > .tooltip-arrow    { border-top-color:    #ec971f; }
.tooltip.warning.right > .tooltip-arrow  { border-right-color:  #ec971f; }
.tooltip.warning.bottom > .tooltip-arrow { border-bottom-color: #ec971f; }
.tooltip.warning.left > .tooltip-arrow   { border-left-color:   #ec971f; }

.tooltip.danger .tooltip-inner          { background-color:    #d9534f; }
.tooltip.danger.top > .tooltip-arrow    { border-top-color:    #d9534f; }
.tooltip.danger.right > .tooltip-arrow  { border-right-color:  #d9534f; }
.tooltip.danger.bottom > .tooltip-arrow { border-bottom-color: #d9534f; }
.tooltip.danger.left > .tooltip-arrow   { border-left-color:   #d9534f; }

Enjoy the working code in action here:

https://codepen.io/anon/pen/pVGKpW

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

Generate spacing between rows of content in HTML or CSS without affecting the spacing between lines of text

In my R Markdown document in R, I want to replace the header labeled "Preface" with grey lines for visual indication. Here's the code snippet I've tried: :::{#preface} <p> Text </p> ::: However, there seems to be no margin at the beg ...

htmlcssr

A photograph displayed within a container using Bootstrap, positioned on the right-hand side

I'm facing an issue with my container setup that includes row > col > img. I need the image to be positioned close to the page border. So far, I have tried making the site responsive using margin-right: -n px, but it doesn't work on mobil ...

htmlcsscontainers

The absence of visible-** and hidden-** classes is quite noticeable in Bootstrap

In my experience with Bootstrap v3, I frequently utilize the hidden-** classes along with clearfix to manage multi column layouts across various screen sizes. This allows me to control the appearance of my columns at different widths effectively. For inst ...

twitter-bootstrapbootstrap-4

Is it possible to utilize onclick for various table cells in jQuery?

I have a situation where I need to loop through dates and display table content accordingly. Could someone please assist me in figuring out how to do this? index.html.erb <% @batches.each do |batch| %> <tr> **<td class = "pie" id ...

javascriptjqueryhtmlruby-on-rails

The implementation of subnavbars within a navigation bar using HTML and CSS

I am looking to align the Login button with the settings icon on the same line above the links in my navbar. Is there a way to accomplish this? Check out this fiddle that demonstrates my issue: FIDDLE Here is the code I have written: <body> < ...

htmlcss

"Utilize Python's Selenium library to automate clicking the 'Get Data

Having trouble with clicking the GetData button to retrieve the output. Looking for assistance on how to achieve this. Update your code below:- from selenium import webdriver from selenium.webdriver.common.keys import Keys from selenium.webdriver.chrome.o ...

pythoncssselenium

What is the best way to responsively scale multiple overlay images in CSS?

I am facing an issue with multiple images overlaid on top of a background in my web design. Here's a sample code snippet that showcases the problem: <div style="position: relative; left: 0; top: 0;"> <img src="images/background.png" styl ...

htmlcsstwitter-bootstrapresponsive-design

Include a class for CSS styling in EJS using Node.js

Attention: Please be aware of the environment in this Application. The following technologies are being used: Windows NPM, Express MySQL This is the code in an ejs template called example.ejs <% if (message) { %> <p class="al ...

cssnode.jsexpressejs

Altering the Color of Items in an ASP.NET ListBox

I have a listbox on a webform that is being populated by a datasource from a SQL Server 2008. Based on the text in the list box, I want the background color of each specific item to be different. For example, if these are the items in the list: AA item ...

c#javascriptasp.nethtmlsql

Can DOM addEventListener be effectively implemented alongside JQuery events?

In my current project, I am utilizing Bootstrap4 alpha version. As part of my investigations, I am attempting to capture a JQuery event using the DOM's addEventListener() method. The specific event is triggered by Bootstrap through the use of the JQu ...

jquerydombootstrap-4event-handlingjquery-events

Only the main page is accessible quickly through Express

Currently, I am delving into learning Express and leveraging FS to load my HTML Page. My research on this topic only led me to references of using ASP.NET instead of Express. Here is a snippet from my Server.js file: var express = require('express&a ...

htmlnode.jsexpressfs

Are there any techniques available to completely eliminate all Tailwind CSS classes from a NextJs application?

We are currently working on a large project similar to Amazon. Two of the branches are utilizing Bootstrap 4. Recently, we decided to integrate Tailwind CSS into the main branch and I made sure to add the content path in the tailwind.config.js file. Everyt ...

reactjsbootstrap-4next.jstailwind-css

I'm trying to set it up so that an image pops up when I hover over text. I've tried incorporating a few different JavaScripts, but I still can

I'm struggling to display an image on my website. I have the necessary code parts, but it's not working as expected. function showImage() { $('.img').addClass('display'); } function hideImage() { $('.img'). ...

javascripthtmlcss

Range slider position not being updated after user interaction

I am working on a webpage with an embedded video and a range slider that serves as a progress bar. Using Javascript, I update the value of the range slider as the video plays, allowing users to navigate through the video content. However, I have encounter ...

javascripthtml

Transform JavaScript code into HTML using jQuery.`

I have a piece of HTML and JavaScript code. The JavaScript code is currently in jQuery, but I want to convert it to vanilla JavaScript: // Vanilla JavaScript code document.querySelectorAll('.hello[type="checkbox"]').forEach(item => { item ...

javascriptjqueryhtml

What is the proper way to utilize xpath for locating an element that has two specific descendants?

I'm faced with a challenge involving an unordered list of dynamically generated list items, each containing labels and values. My goal is to validate that the list includes a specific label with a specific value. I'm grappling with crafting an x ...

htmlxpathprotractor

Transform the colors of rich text content to match dark mode, similar to the feature in MS

Seeking a solution to convert rich text content colors into dark mode without relying on the filter:invert(1) CSS option. Microsoft Outlook manages this conversion effectively, unlike the current method that turns magenta color into green in dark mode. Ou ...

javascripthtmlcssoutlookcolors

Display a hidden div only when a cookie is set during the initial visit

I'm currently facing an issue while trying to set multiple cookies based on the existence of a div using JavaScript. On the first visit, I want to display the div to the user if it exists, then set a cookie (named redCookie) that expires in 3 days. Up ...

javascriptjquerycsscookies

Creating a menu that is even more optimized for mobile devices

I recently came across a mobile menu style that I really like: https://www.w3schools.com/html/default.asp What I appreciate about this style is that even on smaller screens, it still displays some main navigation items. This allows for popular links to be ...

htmlcssreactjsnext.js

Creating a responsive HTML, CSS, and JavaScript popup: A step-by-step guide

I'm facing a challenge in making my HTML, CSS, and JavaScript popup responsive. Despite looking into various resources, I haven't been able to find a solution that fits my code. However, I am confident that it is achievable to make it responsive! ...

javascripthtmlcsspopup