Styling the shadow of Bootstrap 4 tooltip arrows

Below is the arrow of the tooltip without any shadow effect:

https://i.sstatic.net/8gmO1.png

I've been attempting to add a shadow effect to the arrow, but due to its border-based nature, I haven't achieved the desired outcome. The current rendering looks like this:

https://i.sstatic.net/ZDJx1.png

Does anyone have suggestions on how to incorporate a shadow for the arrow section into the rest of the tooltip design? (See code snippet below)

I tried looking at various resources such as this one, but couldn't find a specific solution for adding shadows.

Appreciate any help or guidance on this matter.

$('[data-toggle="tooltip"]').tooltip('show');

        html body {
          background: #eee;
        }
        
        button.btn {
          margin-top: 100px;
        }
        
        .tooltip-inner {
          background-color: white !important;
          color: gray !important;
          border-radius: 0 !important;
          box-shadow: 2px 2px 4px 0px rgba(161, 161, 161, 1);
        }
        
        .bs-tooltip-right .arrow::before {
          border-right-color: white !important;
          box-shadow: 2px 2px 4px 0px rgba(161, 161, 161, 1);
        }
      

        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <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.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
        
        <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Something">
          Some tooltip
        </button>

cssbootstrap-4twitter-bootstrap-tooltip

Answer №1

To achieve this effect, you can utilize CSS tricks by applying styles to the ::after pseudo-element. The shadow can be added there, and setting the z-index to -1 will position it behind for the desired outcome.

$('.element').action('show');
html body {
  background: #f0f0f0;
  margin: 20px;
}

.tooltip-box {
  background-color: white !important;
  color: gray !important;
  border-radius: 0 !important;
  box-shadow: 2px 2px 4px 0px rgba(161, 161, 161, 1);
}

.bs-tooltip-top .arrow::before {
  border-top-color: white !important;
}

.bs-tooltip-bottom .arrow::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  z-index: -1;
  border: 5px solid #fff;
  transform-origin: 0 0;
  transform: rotate(45deg);
  box-shadow: 2px 2px 4px 0px rgba(161, 161, 161, 1);
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<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.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VLEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="bottom" title="Tooltip Content">
  Hover Over Me
</button>

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 come the styles in my CSS file aren't being applied to my images based on their class or ID?

When I apply a className or id to my img tag in my JavaScript (using React.js) and then add a style that references that id or class, the style does not get applied. However, when I do the same for a div, everything works perfectly fine. <--JavaScript- ...

javascripthtmlcssreactjs

Expand the width of the navbar brand icon

Currently working on a landing page project and noticed that my logo appears too small, utilizing Bootstrap 5 style.css ... .navbar-brand { width: 3.5rem; padding: 0 0; margin: 0.3rem 0; position: relative; } .navbar-brand img { width: 100%; ...

htmlcssbootstrap-5

Steps to create a clickable button wrapper label in React

Contained within the components below: <CheckboxGroupLabel htmlFor={option.label}> <FormCheckbox onClick={() => onChange} key={option.label} defaultChecked={defaultChecked} {...rest} /> {option.value} ...

javascripthtmlcssreactjslabel

Enhancing Next.js with custom CSS for React-Bootstrap components: A step-by-step guide

After installing the react-bootstrap module using the pm command and importing it into my _app.js file, I encountered an issue when trying to modify the Bootstrap code for my navbar component. The code snippet provided below showcases the navbar component: ...

cssreactjsnext.jsreact-bootstrap

Is there a way to connect an HTML page without using a hyperlink?

Is there a way to directly display linked HTML pages on my webpage instead of just creating a link? I'm looking for suggestions on how to arrange this. Thank you! ...

javascriptjavahtmlcss

Is there a way to customize the font in the web inspector for Safari 8?

Is there a different method for modifying the css in Safari 8.0.2's Web Inspector on Yosemite 10.10.1? I've heard that editing /System/Library/PrivateFrameworks/WebInspector.framework/Versions/Current/Resources/Main.css has worked in previous ve ...

cssmacossafariweb-inspector

Transform an iOS WebView into a user-friendly ebook reader

Typically, in a webview, you can scroll vertically like a browser if the page is too long. However, I am interested in transforming this experience to mimic an ebook reader. Rather than scrolling down, I would like users to be able to swipe to the next pag ...

cssiosjquery-mobileuiwebview

Issue with transition effect not functioning properly when hovering in HTML and CSS

Is there a way to achieve a slow smooth transition when hovering over the .bg-gradient element and have the same effect when removing the cursor? Currently, the transition happens quickly on hover. .asc { height: 500px; background-position: 50%; ...

htmlcssbackgroundhovercss-transitions

None of the stylesheets are functioning properly in WordPress except for the menu

After installing a new theme and making some menu edits, my site suddenly broke. Strangely, only the menu css seems to be working fine. Instead of images, I am now seeing a string of array codes and the css is not functioning properly. It seems like the ...

csswordpresswordpress-themingstylesheet

Switch from scrolling the entire page to scrolling within a single div

Whenever I click on an element on my webpage, a modal window with a fixed position appears. The issue I am facing is that when I scroll using the mouse or touch gestures on my phone or tablet, the entire page scrolls instead of just the content within the ...

jqueryhtmlcssscroll

Click the closest checkbox when the value equals the Jquery datatable

I am facing an issue where I need to add a class and click on a specific element in each row of my jQuery datatable if a certain value is equal. However, I am unable to successfully add the class to that element and trigger a click event. <table id="us ...

javascriptjqueryhtmlcss

Centered div's overflow remains visible

Yes, the positioning of the parent container is set to relative. I am attempting to achieve a ripple effect by expanding multiple circles from a central point in all directions until they stretch beyond the viewport. I have created circular divs that are ...

htmlcssoverflow

When the Navbar div is set to Position:fixed, it generates empty space on the page

I'm facing the issue of unwanted white space in the center of the page below the Navigation Bar. Despite numerous attempts to remove it, I haven't been successful. Below is the HTML code snippet: html: <!DOCTYPE html> <html> <h ...

htmlcsswhitespace

What is the equal tr of CSS?

Is there a way to separate the menu bar from the body within a div, so that everything after 'contact' appears below it? Is there a specific code or command similar to a newline that can achieve this? Your help is greatly appreciated :) Thank you ...

css

Error Message Design in ASP.NET

I am currently developing a website using .net, which is a new technology for me. Here is the snippet of code I am working with... <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ValidationGroup="V1" Display="Dynamic" ...

.netasp.netcss

Removing empty table rows using JavaScript when the page loads

Within my HTML table, I have noticed some empty cells and rows that need to be removed. To give an example of the code: <table id="7"> <tr> <td>Name</td> <td>Type</td> <td>Parent</td> <td>Time</td&g ...

javascripthtmlcss

Personalize the width of the columns

My SharePoint Online HTML code is as follows: <div sortable="" sortdisable="" filterdisable="" filterable="" filterdisablemessage="" name="Responsable" ctxnum="14" displayname="Responsable" fieldtype="User" ...

jqueryhtmlcss

What is the best way to use jQuery to emphasize specific choices within an HTML select element?

Seeking help with jQuery and RegEx in JavaScript for selecting specific options in an HTML select list. var ddl = $($get('<%= someddl.ClientID %>')); Is there a way to utilize the .each() function for this task? For Instance: <select i ...

javascriptjqueryhtmlcss

Is there a way to display Bootstrap 4 progress bars next to each other in two distinct columns within a single container?

I am struggling with controlling the positioning of Bootstrap 4 progress bars. It seems that Bootstrap's progress bars are based on Flexbox components, which is causing confusion for me. I have provided an image showcasing my issue here Within my cur ...

htmlcsstwitter-bootstrapbootstrap-4twitter-bootstrap-4-beta

style the table cells based on results of winner values retrieved from JSON

After fetching JSON data, I am utilizing angular JS to present it in a table. The table consists of multiple rows that are populated from the JSON file using ng-repeat. The value for Status.winner can either be 0 or 1. If the winner's value for a p ...

cssangularjsjsonangularjs-ng-repeatng-bind