"Enhancing the appearance of tooltips with Bootstrap arrow designs

I am trying to customize the appearance of a bootstrap tooltip. I have successfully styled the body of the tooltip, but I am struggling to figure out how to style the arrow as shown in the image below.

Click here to see the Image for reference

Visit this Bootply link for more information

Here is what I have managed to achieve so far:

.tooltip>.tooltip-inner {
background-color: $tool-tip;
color: $text-color;
border: 2px solid $tool-tip-border;
font-weight: 300;
font-size: 14px;
border-radius: 10px;
padding: 15px 25px;
max-width: 240px;
}

.tooltip.bottom >.tooltip-arrow {
top: 0;
left: 50%;
margin-left: -5px;
border-bottom-color: #000000;
border-width: 0 5px 5px;
}
htmltwitter-bootstrapcss

Answer №1

$("[data-toggle=tooltip]").tooltip({trigger:"click"});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<style>
body {
  background: red;
}

.tooltip >.tooltip-inner {
    background-color: #000;
    color: #fff;
    border: 2px solid #efefef;
    font-weight: 300;
    font-size: 14px;
    border-radius: 10px;
    padding: 15px 25px;
    max-width: 240px;
}

.tooltip .arrow:before {
    top: -3px;
    left: -12px;
    border-bottom-color: #ffffff;
    border-width: 0 12px 12px;
    z-index: -1;
}

.tooltip .arrow {
    top: 3px;
    left: 50%;
    border-style: solid;
    border-color: transparent transparent #000000 transparent;
    border-width: 0 10px 10px;
}
</style>

<div id="custom-css">
  <a href="#" data-toggle="tooltip" title="Hello world">Click to see my tooltip</a>
</div>

<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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>

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

The HTML dropdown menu is not automatically choosing the initial value

When using AngularJS and HTML to create a basic website, I encountered an issue with a dropdown menu. Despite having three options in the select list, the first value is not selected by default on the browser page. Here is how the HTML looks on the browse ...

htmlselectbootstrap-4dropdownhtml5-history

html creating a listbox and sending the selection to a PHP script

When I create a list like the one below and add items to it using jQuery, everything works fine until I submit it to the server (PHP). The post variable only contains the last <option></option> that was clicked on, but I want to be able to get ...

phphtmlhtml-listshtml-select

Using AngularJS to handle error validation for dropdowns and select elements that will redirect using the ng

Currently, I am utilizing angularjs's ng-href along with a select HTML element containing ng-model. The ng-href is being used to link to the "selectedItem" from ng-model. However, I have encountered difficulty in validating or displaying an error mess ...

javascripthtmlangularjsvalidationangularjs-ng-href

Issue with Bootstrap's pull-right class causing elements to overlap

I need help positioning a single button above a list, with the button to the right. Whenever I try using the pull-right class on the button (or its containing div), the button ends up being covered by the list. <div> <div class="pull-right"& ...

htmlcsstwitter-bootstrap

Creating custom Bootstrap Card Groups by dynamically generating the specified number of cards with Angular directives

I am currently using Angular 9.1.8 for my project. For my Angular component, I have implemented Bootstrap Card Groups and Cards to display a large result set of cards in rows with more than two cards per row. Below are four example cards: <div class=&q ...

javascripthtmlcssangularbootstrap-4

Extracting tables from HTML files programmatically using C/C++

Currently, I am exploring new methods for extracting tables from HTML files. My current approach involves using tidy () to convert the HTML file into XHTML, and then utilizing rapidxml for XML parsing. During the parsing process, I specifically search for ...

c++htmlcxml-parsinghtml-parsing

Exploring the Power of JQuery with Hover Effects and SlideToggle

I was struggling to keep the navbar displaying without it continuously toggling when my pointer hovered over it. I just wanted it to stay visible until I moved my pointer away. <script> $(document).ready(function(){ $(".menu-trigger").hover(funct ...

javascriptjqueryhtmlcsshover

Optimal methods for arranging images in a list with CSS

I am trying to create a grid layout for a list of images using CSS. Here is the HTML code I have: <ul id='feat-products'> <li><img id='feat-product-1'></li> <li><img id='feat-product-2&apos ...

htmlcss

Best practices for coding in HTML and CSS

Creating my first website for an internship has been quite a learning experience. Throughout my training, I was always advised to avoid embedding styles directly into the HTML code. However, now that I am actually developing a site, I can't help but f ...

htmlcss

Unable to apply filter in IE11

When applying color to bootstrap 2.3.2 Icons, I utilize the filter property in CSS. While this method is effective in most browsers, it does not work as expected in IE11. .apply-color { filter: opacity(0.5) drop-shadow(0 0 0 blue); } What is the worka ...

cssinternet-explorerbootstrap-4cross-browsericons

Inconsistency in retrieving and setting width values with jQuery across various web browsers

My TH element currently has both left and right padding set to 18px. I am attempting to determine its width using jQuery, convert this width from pixels to a percentage, and then set the element's width based on this calculated percentage. var origin ...

jquerycss

Deliver CSS and JS files from directories outside of the public folder in Laravel 5

Although it may seem to deviate from Laravel's structured approach, I have a method to my madness. My plan is to use a single installation of Laravel to host multiple database-driven websites. Currently, all these sites share the same layout, with a s ...

phpcsslaravellaravel-5

What is the best way to display a multi-level sub-menu in front of its parent menu?

Code: nav#desktop-nav ul li > ul { position: relative; margin-top: 0; text-align: left; opacity: 0; visibility: hidden; position: absolute; top: 100%; transform: scaleY(0); transform-origin: 0 0 0; transition: al ...

htmlcss

What is the best way to store a range object obtained from getSelection in order to recreate it on a separate page load?

My goal is to develop a web application that enables users to highlight selected text on a webpage with the click of a button. I want these highlights to persist even when the user returns to the page. So far, I have achieved: var selectedRange = documen ...

javascriptjqueryhtmldom

Building a MultiLevel table in angularjs: A step-by-step guide

I am looking to create a table format that does not use ul li tags, structured as shown below: ----------------- # | name | ----------------- 1 | Level_1-a | 1 | Level_2.1 | 2 | Level_2.2 | 3 | Level_2.3 | 1 | Level_2.3.1| 2 | Leve ...

htmlangularjs

Preventing the build-up of opacity animations in jQuery: Tips and tricks

-I have two division tags in my code. <div id="div1">Hover over me to show Div2</div> <div id="div2">Div2</div> -I used CSS to set the opacity of div2 to 0. -My goal is for div2's opacity to change from 0 to 1 when hovered o ...

javascriptjqueryhtml

Tips for aligning numerous rows in a single column using Bootstrap

I have a col div with 3 row divs that I am trying to center within the col div. Currently, they are aligned to the left side of the col div as shown in the image. I am struggling to figure out how to place them in the center of the col div. https://i.ssta ...

htmlcsslaravelbootstrap-4

What methods can I use to ensure my HTML/CSS code is compatible with all browsers? It functions properly on Chrome but encounters issues on Safari, Edge, and other

My hosting for the website is with bluehost, and interestingly when viewed on Chrome, everything appears perfect. However, upon switching to Safari, I noticed that the background of the about me section is not black as intended, and the footer seems to be ...

htmlcss

Can you explain the distinctions among the <cite>, <em>, and <i> HTML tags?

Could someone explain the distinctions among <cite>, <em>, and <i> tags in HTML? Despite appearing similarly in most browsers, do these tags hold different meanings? Can anyone provide examples of when each of these tags should be utili ...

htmlcss

CSS3 Transform can sometimes cause unpredictable z-index or depth arrangements

Could there possibly be a glitch in CSS3, or am I just making a simple mistake? Take a look at the page I'm currently working on: View Page I wish I could demonstrate the error, but its behavior seems to be completely unpredictable. Here's what ...

javascripthtmlcssz-indexcss-transforms