Customizing a Bootstrap tooltip balloon to align perfectly with just an outline

In an effort to create a custom tooltip balloon, I have decided to override some of the default Bootstrap styles in my project.

Here is the CSS code I am using:

/*overriding bootstrap*/
.tooltip-inner {
    border: 1px solid #0ad;
    background: #FFFFFF;
    font: 12px Arial;
    color: #494949;
    line-height: 18px;
    max-width: 200px;
    padding: 12px;
    text-align: left;
    border-radius: 1px;
    box-shadow: 2px 2px 5px rgba(0,0,0,.3);
}
.tooltip-arrow,
.tooltip-arrow:after {
border-width:7px!important;
    display: block;
    border-color: transparent;
    border-style: solid;
    height: 0;
    position: absolute;
    width: 0;
content: "";
}
.tooltip.top>.tooltip-arrow,.tooltip.top>.tooltip-arrow:after {
border-bottom-width:0!important;
    border-top-color: #0ad;
    bottom: -2px;
    margin-left: -7px;
}
.tooltip.top>.tooltip-arrow:after {
border-top-color: #fff;
bottom: 1.5px;
}
.tooltip.right>.tooltip-arrow,.tooltip.right>.tooltip-arrow:after {
border-left-width:0!important;
    border-right-color: #0ad;
    left: -2px;
    margin-top: -7px;
    top:22px;
}
.tooltip.right>.tooltip-arrow:after {
border-right-color: #fff;
left: 1.5px;
top:0;
}
.tooltip.left>.tooltip-arrow,.tooltip.left>.tooltip-arrow:after {
border-right-width:0!important;
    border-left-color: #0ad;
    right: -2px;
    margin-top: -7px;
    top:22px;
}
.tooltip.left>.tooltip-arrow:after {
border-left-color: #fff;
right: 1.5px;
top:0;
}
.tooltip.bottom>.tooltip-arrow,.tooltip.bottom>.tooltip-arrow:after {
border-top-width:0!important;
    border-bottom-color: #0ad;
    top: -2px;
    margin-left: -7px;
}
.tooltip.bottom>.tooltip-arrow:after {
border-bottom-color: #fff;
top: 1.5px;
}

Here is a preview of my customized tooltip balloon: Click to view

However, I am facing a challenge with aligning the arrows with the (i) symbol inside the tooltip. Due to the varying length of the text content, the height of the balloon changes and the arrows are not centrally aligned. Can anyone provide guidance on how to resolve this issue? Thank you.

htmlcsstwitter-bootstraptwitter-bootstrap-tooltip

Answer №1

If you're looking for tooltip examples, check out these options:

<p><code>.toolbar-right</code> <a href="#" class="tooltip-right" data-tooltip="I’m the tooltip text.">Tooltip</a></p>

View Demo Here

Alternatively, you can try this:

<body>  <br /> <br /> <br /><br />


<p align="center">Hi, <a href="#" bubbletooltip="Hi I am a bubble tooltip">This is a demo </a></p>

</body>

View Demo Here

OR

<a class="tooltips" href="#">CSS Tooltips
<span>Tooltip</span></a>

View Demo Here

Answer №2

Big thanks to everyone, I managed to solve the issue.

$(function(){
  $('[data-toggle="tooltip"]').tooltip();
});
@import"http://getbootstrap.com/dist/css/bootstrap.css";
 
.lw {
    font-size: 60px;
}
.image {
    align-self: center;
    margin-top: 100px;
    margin: 100px;
}
/*overriding bootstrap*/
 .tooltip {
    box-shadow: none;
    z-index: 6000;
}
.tooltip.left, .tooltip.right {
  /*this makes the difference*/
    margin-top: -80px;
    top: 50%!important;
}
.tooltip.top, .tooltip.bottom {
    margin-left: 0px;/*just in case*/
}
.tooltip.top {
    margin-top: -15px;
    padding-top: 0;
}
.tooltip.bottom {
    padding-bottom: 0
}
.tooltip.left {
    margin-left: -15px;
    padding-left: 0
}
.tooltip.right {
    padding-right: 0
}
.tooltip-inner {
    border: 1px solid #0ad;
    background: #FFFFFF;
    font: 12px Arial;
    color: #494949;
    line-height: 18px;
    max-width: 200px;
    padding: 12px;
    border-radius: 1px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, .3);
    width: 200px
}
.left>.tooltip-inner, .right>.tooltip-inner {
    text-align: left;
}
.tooltip-arrow, .tooltip-arrow:after {
    border-width:7px!important;
    display: block;
    border-color: transparent;
    border-style: solid;
    height: 0;
    position: absolute;
    width: 0;
    content:"";
}
.tooltip.top>.tooltip-arrow, .tooltip.top>.tooltip-arrow:after {
    border-bottom-width:0!important;
    border-top-color: #0ad;
    bottom: -2px;
    margin-left: -7px;
}
.tooltip.top>.tooltip-arrow:after {
    border-top-color: #fff;
    bottom: 1.5px;
}
.tooltip.right>.tooltip-arrow, .tooltip.right>.tooltip-arrow:after {
    border-left-width:0!important;
    border-right-color: #0ad;
    left: -2px;
    margin-top: -7px;
    top:22px;
    /*offset*/
}
.tooltip.right>.tooltip-arrow:after {
    border-right-color: #fff;
    left: 1.5px;
    top:0;
}
.tooltip.left>.tooltip-arrow, .tooltip.left>.tooltip-arrow:after {
    border-right-width:0!important;
    border-left-color: #0ad;
    right: -2px;
    margin-top: -7px;
    top:22px;
    /*offset*/
}
.tooltip.left>.tooltip-arrow:after {
    border-left-color: #fff;
    right: 1.5px;
    top:0;
}
.tooltip.bottom>.tooltip-arrow, .tooltip.bottom>.tooltip-arrow:after {
    border-top-width:0!important;
    border-bottom-color: #0ad;
    top: -2px;
    margin-left: -7px;
}
.tooltip.bottom>.tooltip-arrow:after {
    border-bottom-color: #fff;
    top: 1.5px;
}
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

<script type="text/javascript" src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<title>HTML5, CSS3 and JavaScript demo</title>
</head>
<body>
<!-- Start your code here -->
  <br/><br/><br/><br/><div> 
<span data-original-title="Information about internet contract length" data-placement="right" data-toggle="tooltip" class="image"><a href="#">Tooltip</a></span>
  </div>
 

<!-- End your code here -->
</body>
</html>

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

Real-time Email Validation: Instant feedback on email validity, shown at random intervals and does not persist

I am attempting to show the email entered in the email input field in a validation message. The input field also checks my database for registered emails and displays a message based on the outcome. I then included this code from a source. What happens is ...

phpjqueryhtml

Modify CSS class if user is using Internet Explorer version 10 or above

I am attempting to modify the CSS of 2 ASP controls using jQuery specifically for users accessing the site with Internet Explorer 10 or 11. This adjustment is necessary because IE10 onwards, conditional comments are no longer supported. My approach to achi ...

javascriptjqueryasp.netcssinternet-explorer

Search bar placeholder text appears off-center in Firefox browser

I have implemented a universal search bar on our website and it is working perfectly in Chrome and Safari. However, I am facing an issue with Firefox where the placeholder text is aligned to the bottom of the bar instead of the middle. Usually, placeholder ...

csssearchplaceholder

What is the best way to include spacing among my Bootstrap 5 navigation components?

Looking for advice on creating space between each nav-item in a bootstrap 5 navigation bar while maintaining a clean design for phone mode. Here's the code snippet: <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi ...

htmlcssbootstrap-5

Guide to aligning form data with Bootstrap

Struggling to align my form data in the center below. I have attempted various online solutions without success. The use of bootstrap and offset is causing issues with the title for the form and the actual form itself. Any suggestions would be highly appre ...

htmlcssformstwitter-bootstrap-3centering

Arrange Bootstrap columns based on the available space within a loop

The content is contained within a md-8 div and generated through a PHP loop. The loop includes sections for: 1. about us 2. areas we cover 3. job board 4. candidates 5. join us 6. contact Due to the limited height of the "areas we cover" section, th ...

phpcsswordpressbootstrap-4

Tips for selecting array [0] and turning it into a clickable link with JavaScript

My challenge lies in redirecting to a different URL when the user clicks on <a href="javascript:void(0)">Hotel Selection</a>. Below is my current progress. Grateful for any assistance! <div id="menu"> <ul> <li class= ...

javascriptjqueryhtml

Attempting to emulate the grid showcase using flexbox styling

Creating this layout using CSS Grid was a breeze. However, I wonder if it can be achieved with Flexbox. What do you think? .Message { display: inline-grid; grid-template-areas: ". name""date text"; } .Date { align-items: ...

htmlcss

An empty space separating the header and the navigation bar

As a beginner in HTML and CSS, I decided to create a basic website. However, I encountered an issue with the layout - there seems to be a gap between my header image and navigation bar, but I can't figure out what's causing it. HTML <!DOCTYPE ...

htmlcss

Add a transition or animation effect to the <details> element as it closes

I am experimenting with adding a transition effect to the details element when it opens and closes: details { height: 1em; transition: height 2s; border: 1px solid; overflow: hidden; white-space: pre; } details[open] { height: 6em } <det ...

htmlcss

Increase the size of the grid system column upon clicking on a Bootstrap icon

I am using Google Maps in a tab with Bootstrap, but the map is too small. I would like to change the Bootstrap grid system when I click on a FontAwesome icon: the first column should turn into col-md-8, and the second column should become col-md-4. Here i ...

javascriptjqueryhtmlcssbootstrap-4

Adjusting Chart.js line graph alignment to the left

I'm curious about why my chart is not aligned to the left and how I can fix this issue. Here is the code snippet I am working with: var data = { labels: ["ID"] , datasets: [ { label: "Sensor 1" , data: [{ ...

javascripthtmlcsschart.js

Using a carousel component in Bootstrap

Just starting out with this, trying to customize Bootstrap to change slides automatically. I followed the documentation at https://getbootstrap.com/docs/4.3/components/carousel/ but for some reason, the slides aren't changing on an interval, even thou ...

javascripthtmlcssbootstrap-4carousel

Mobile Apps Plagued by Frozen Preloader Gif Images

Working with jQueryMobile(1.3.1) and Phonegap(2.7.0) for developing Android and iPhone applications has presented me with a challenge regarding the Preloader Image. I am currently using a Gif image as my preloader. The custom function I am using for the p ...

jqueryhtmljquery-mobilecordovaimage-preloader

Different ways to display an HTML page in a well by utilizing a div tag and jQuery from a side menu

Check out my Tutorial Page! Currently, I am working on a simple tutorial page utilizing bootstrap 3. My goal is to showcase the HTML file content within the well container on the right side of the page. However, I am facing challenges as I do not want to ...

jqueryhtmlcss

A Step-by-Step Guide to Downloading Images by Clicking

Having an issue with my image download code. When I try to download an image, the process starts but doesn't complete and no file is received. Instead, a type error is encountered. <html> <head> <script type="text/javascript"> funct ...

javascriptjqueryhtml

Customize your website with eye-catching full width colored blocks using Bootstrap 3

I am in need of colorful full-width blocks to differentiate the sections on my website. Currently, I am constructing my website with Bootstrap 3 within a standard container. However, I would like certain sections to be vibrant blocks that span across the ...

htmlcsstwitter-bootstrap

What's the best way to vertically center a div with a 100% width and a set padding-bottom on the screen?

I am struggling with positioning the following div on my webpage. .div { width:100%; padding-bottom:20%; background-color:blue; } <div class="div"></div> I have been searching for a solution to vertically center this responsive div on my web ...

javascriptjqueryhtmlcss

What is the best method for validating multiple fields in a form with Javascript?

I am currently working on validating multiple fields within a form. Although I lack experience in JavaScript, I have managed to piece together a code that is functional for the most part. If all fields are left blank, error messages prompt correctly. Howe ...

javascripthtmlformsvalidation

Having trouble getting the .each() method to function properly in jQuery

Looking for a solution to a similar issue here. Currently, I am attempting to iterate through multiple forms on a webpage and perform various actions with those forms. However, I am facing some challenges in making it work. Below is the code I am using: ...

javascriptjqueryhtmldom