Customizing Bootstrap tooltip appearances with CSS

After successfully setting up Bootstrap 4.5.0, I decided to experiment with customizing the styles of tooltips. The code snippet below shows how I attempted this.

Initially, I included the necessary stylesheets at the top of the page:

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <link rel="stylesheet" href="https://getbootstrap.com/docs/4.5/assets/css/docs.min.css">

    <link href="mystylesheet.css" rel="stylesheet">

Next, I inserted the tooltip markup within the page:

<span id="custom-tooltip" data-toggle="tooltip" data-placement="top" data-html="true" title="TTooltip tests">
    <svg ...></svg>
</span>

To ensure proper functionality, all corresponding JavaScript was placed at the bottom:

    <!-- jQuery first, then Popper.js, followed by Bootstrap JS --><
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fe8e918e8e9b8cd0948dbecfd0cfc8d0cf">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"gt;</script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

    <!--Initialize tooltips using Popper.js-->
    <script type="text/javascript">
        $(function ()
        {
            $('[data-toggle="tooltip"]').tooltip()
        });
    </script>

Despite my efforts in updating mystylesheet.css with the given CSS rule, no changes were reflected:

span#custom-tooltip .tooltip
{
    background-color: green !important;
}

The alteration in background color mentioned above is merely a sample. I aim to implement various other CSS modifications beyond just colors.

htmlcsstwitter-bootstrapbootstrap-4tooltip

Answer №1

According to information provided in the documentation,

The .tooltip element appears outside the element that triggers it, as shown below:

<!-- HTML code -->
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>

<!-- Markup generated by the plugin -->
<div class="tooltip bs-tooltip-top" role="tooltip">
  <div class="arrow"></div>
  <div class="tooltip-inner">
    Some tooltip text!
  </div>
</div>

Therefore, styling like span#custom-tooltip .tooltip will not function as expected. Instead, use the following approach:

.tooltip
{
    background-color: green !important;
}

If you wish to apply styles only to specific tooltips, consider the following solution:

$('#example').tooltip({
    html: true,
    title: 'xyz',
    template: `
        <div class="custom-tooltip tooltip">
            <div class="tooltip-inner"></div> /* leave it blank so the title will fill in dynamically here by bootstrapjs */
        </div>
    `
});

Then, style your custom tooltip like this:

.custom-tooltip {
    /* insert your custom styles here */
}

For additional configuration options, refer to the 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

Combining DataTables with multiple tables sourced from various JSON arrays

I am trying to display data from two different arrays within the same JSON source in two separate tables, but my code seems to be malfunctioning. JSON Information: { "Policies": [ { "name": "A", "id": "1", "score": "0" } ], ...

javascriptjqueryhtmljsondatatables

What is the most efficient method for designing this jQuery code to be reusable?

I am currently using dynamic Bootstrap popovers that are populated with content from my database. In PHP, it generates unique classes for each popover. My question is, when using jQuery, do I need to trigger the popovers individually? This is how I am cur ...

javascriptjquerytwitter-bootstrap

My experience with jquery addClass and removeClass functions has not been as smooth as I had hoped

I have a series of tables each separated by div tags. Whenever a user clicks on a letter, I want to display only the relevant div tag contents. This can be achieved using the following jQuery code: $(".expand_button").on("click", function() { $(th ...

javascriptjqueryhtmlcss

SVG failing to display properly

I need to place a close button in the top right corner of my page. Here is the code for the SVG: .icon { width: 24px; height: 24px; /* any changes to the fill attribute have no effect */ fill: currentColor; } <svg class="icon"> &l ...

htmlcsssvg

Tips for utilizing a function to assess ngClass conditional statement in Angular 2

So as I loop through my list using *ngFor, the code snippet is like this: [ngClass]="{'first':isStartDate(event,day)}" The function isStartDate is defined in my component. An error message appeared: "Unexpected token : " ...

htmlangulartypescript

Utilizing Ajax: Sending Customized Data to a Modal

Having never worked with jquery before, I struggled to find a solution for my specific case. On the cockpit.php page, I have a form that retrieves content from a mysql database. Currently, I am able to display this content in a div on the same cockpit.php ...

javascriptphpjqueryhtmlajax

How to display HTML on top without altering the viewport in React?

I am trying to display a component <Top /> above another component <Bottom /> in React. The code structure is as follows: ... [top, setTop] = useState(false); [bottom, setBottom] = useState(true); ... return ( <div> top && (< ...

htmlcssreactjsrenderviewport

Show the chosen choice in a select dropdown with custom text using Angular

I successfully implemented this code snippet to display a dropdown list of countries and their phone codes. However, I encountered an issue where I need to only show the selected option's code without the country name. The first screenshot shows how i ...

javascripthtmlangulardrop-down-menu

perform an action in PHP when a button is clicked

I'm currently developing a PHP admin panel that displays a list of users in an HTML table format. Each row in the table includes a button that allows the admin to send a notification to the selected user. Below is the code I used to create and displa ...

javascriptphphtmlajax

What is the technique for anchoring elements at the top of the page when scrolling?

There is a common design feature where the sidebar on the left starts at a lower position on the page, but as you scroll it moves up to the top and remains fixed in place instead of disappearing off the screen. This is a popular design trend that I have ...

javascriptjquerycsshtmlparallax

Issue with website header disappearing

I'm currently struggling with an issue - I can't seem to pinpoint the problem. The header of a website template is functioning perfectly in 1280*800 resolution, but it's breaking on larger monitors (1900*1440). The header consists of three d ...

htmlcssheader

Updating the correct list item in an unordered list on a Bootstrap modal pop-up submission

I am dealing with an unordered list of messages where each message within a list item is clickable. <ul id="home-message-list" class="messages"> <li> <a href="#"> <span class="linkClick" name="message">< ...

jqueryhtmlajax

Using Media Queries to Optimize Image Display for Higher Pixel Densities: @2x, @3x,

My current project involves supporting various pixel ratios on the website I am developing. I want to make sure that I include all necessary browser prefixes to ensure compatibility with a wide range of devices and browsers. While I am using SVGs whenever ...

imagecssmedia-queriesretina-display

Implementing a JavaScript file and ensuring W3C compliance

I recently purchased a template that included a javascript file in the main page with the following code: <script src="thefile.js?v=v1.9.6&sv=v0.0.1"></script> Upon inspection, I noticed there are two arguments at the end of the file ...

javascripthtmlw3c

Can basic logic be applied to CSS?

Recently, I have been experimenting with CSS to blur NSFW images in a chatroom until they are hovered over. I have successfully accomplished this task and now my next goal is to implement checkboxes that can toggle the display of these images. I am aware o ...

css

Tips for positioning an asp.net Button alongside other elements in a form by making use of Bootstrap styling

Looking to revamp the style of my ASP.NET Web Forms project with the latest version of Bootstrap. Having trouble aligning an ASP.NET Button control horizontally with other controls in the form, as seen in this snapshot: https://i.sstatic.net/IVRKo.png Her ...

htmlcssbootstrap-4webforms

The XPath function $x() will always return an array, regardless of whether or not an index is specified

How can I target the div elements that have the class "month-table_col" (selecting by month). ... <div class="month-table"> <div class="month-table_row"> <div class="month-table_col">Jan ...

htmlcssxmlxpathweb-scraping

Tips for displaying nested JSON arrays in HTML using Ember.js

I'm having trouble displaying the JSON data I get in app.js using HTML. Any suggestions? Here is the code for app.js (I am confident that $.post is returning valid JSON) App.CadeirasRoute = App.AuthenticatedRoute.extend({ model: function() { a ...

jqueryhtmlajaxjsonember.js

How to Programmatically Assign Bootstrap Class to an Element Using Angular 2

I am working on a page with several input boxes that need to be flagged for certain criteria. <div class="form-group"> <label class="d-block">Allowance Type</label> <div class="input-group"> ...

csstwitter-bootstrapangular

Is Flex still wrapping elements even when set to nowrap?

My goal is to create a layout with 4 blocks, where the first section contains 2 blocks each occupying 50% of the width, followed by 2 other blocks in the next section. I am utilizing the flex property for this layout. I want the flex-container to take up ...

htmlcssflexbox