Misplaced Bootstrap 4 tooltip causing alignment issues

Hello, I've encountered an issue while using Bootstrap 4 and have compiled the CSS from the Sass files using Ruby Sass 3.7.4.

Although I removed certain parts of the Sass, I don't believe there are any dependencies affecting how Tooltips function: code, card, badge, jumbotron, progress, carousel.

The HTML markup I am using is very simple:

 <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>

However, it is rendering incorrectly like this:

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

I have eliminated all custom CSS and am using only the compiled Bootstrap 4 CSS.

In addition, I have included bootstrap.bundle.min.js and jquery-3.2.1.min.js

I am puzzled by this issue because the examples provided in the documentation https://getbootstrap.com/docs/4.0/components/tooltips/#examples are working as intended.

The JavaScript code to initialize the Tooltips is located in a JS file that loads when the page loads:

$(function () { 
    $('[data-toggle="tooltip"]').tooltip();
});

If anyone has any insights or ideas on how to resolve this, I would greatly appreciate it. Thank you!

htmlcssbootstrap-4

Answer №1

Everything is functioning correctly... Perhaps there is an issue with your CSS styling.

<!DOCTYPE html>
<html lang="en-US">
<head>
  <title>Example using Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h3>Tooltip Demo</h3>
  <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on the right">Tooltip on the right</button>
</div>

<script>
$(document).ready(function(){
  $('[data-toggle="tooltip"]').tooltip();   
});
</script>

</body>
</html>

Answer №2

It appears that a css property is missing. To remedy this, consider adding the following code snippet for testing purposes:

.tooltip{
  display: inline;
  position: relative;
}

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

Error alert: $.simpleWeather function not found

Currently, I am attempting to incorporate simpleWeather.js from the website simpleweatherjs.com into my own website. However, upon inserting the html code onto my website, an error message pops up: Uncaught TypeError: $.simpleWeather is not a function ...

javascriptjqueryhtmlfunctionreference

The img-fluid class is not properly adjusting the height of the image

I'm currently working with Bootstrap 4 and facing a challenge with creating a grid of 4 images - 2 on top and 2 at the bottom. I've applied the img-fluid class, but the image resizing is based solely on width, leading to the height being too larg ...

htmlcssbootstrap-4fluid-layout

How can I implement JQuery in JavaScript to enhance functionality on an HTML webpage?

I'm currently working on a website project and I'm running into some trouble with my jQuery library. I've tried implementing the code below, but it doesn't seem to be working. I'm using Notepad++ with Denwer local server. <scrip ...

javascriptphphtmljquerylocalhost

Looking for CSS properties to personalize a dropdown list in an HTML select element

After spending several days scouring the internet and trying out numerous methods, I have yet to find a satisfying way to create my own dropdown list. Using CSS, I am able to customize the text color (A), the border style and color (B) of the dropdown fie ...

htmlcssdrop-down-menu

Modify the text in a paragraph by clicking on a link using JQuery and HTML

I'm attempting to implement a straightforward action, but I'm facing some challenges. My navigation bar consists of a few links followed by a text section. What I aim for is that when I click on a link, the paragraph of text should change to refl ...

javascriptjqueryhtmlcsstoggle

Show a dropdown menu based on the selection made in another dropdown menu

<select name = "team1"> <option>Computer Science</option> <option>Mathematics</option> <option>Bioinformatic</option> <option>Management Sciences</option> </select> <select name = "team ...

phphtmlajax

Creating a visually appealing user interface can be achieved by utilizing HTML/CSS to include bullet points and enumeration numbers in the page

I am looking for a way to display lists in a document with a style similar to the image on the right below: The text content of the list items is formatted like any other <p> and the bullet points are located in the margin. Is there a CSS solution ...

htmlcss

The Tab style in Mobile Angular UI does not get applied correctly when nested within an ng-repear

While working on a tabbed control with mobile-angular-ui (), I encountered an issue when trying to generate the tabs dynamically. Initially, everything looked good with the following code: <ul class="nav nav-tabs" ui-state='activeTab' ui-def ...

javascriptangularjshtml

What could be causing the submit button to malfunction on bootstrap models?

My submit button's modal doesn't stay open long enough when clicked. The purpose of the modal linked to the submit button is to prevent users from moving to the next page if there are empty fields in the form (using validation rules). In my setup ...

phpcodeigniterbootstrap-4

Transfer data in an array within value="" separated by ':' through AJAX/JSON in PHP and HTML

Can data be passed in array form using AJAX/JSON? For example, like ".$row['departmentname'].":".$row['jobposition'].":".$row['deptcode']."? Here is a sample code snippet to illustrate this: if(sqlsrv_num_rows($query) > 0 ...

phphtmlsqljsonajax

Scrapy fetches the HTML template instead of the webpage source code

As a newcomer to Scrapy, please excuse my potentially naïve question. import scrapy from bs4 import BeautifulSoup from scrapy_proj.scrapy_proj.items import PageSourceLoc, ItemField from scrapy.loader import ItemLoader from scrapy.http.response import Resp ...

pythonhtmltemplatesscrapy

I am looking to expand the width of the Bootstrap container specifically for the Max width

I need to adjust the width of the Bootstrap container to be responsive on all devices, especially maximizing the width on larger screens. Can anyone provide guidance on how to achieve this? Thank you in advance. To view my website, please follow this link ...

htmlcssbootstrap-4

Using Tailwind CSS to center a NexJS <Image /> component within a modal

In an effort to style my MapBoxGL popup content, I am working on aligning the text above the image to the left and centering the image below within the popup. As shown in the image below, this is currently proving to be a challenge as I transition from usi ...

cssreactjsnext.jstailwind-cssnext-images

React Native buttons are displaying at a fixed width and not adjusting as expected

Within a row, I have two buttons with a padding of 20 between them, and they are only taking up the necessary width for the button text. The width remains constant! Here is the code for the buttons: <View style={styles.buttonContainer}> &l ...

javascriptandroidcssreactjsreact-native

Determining the height of a different element using only CSS, Stylus, or Nib

Looking to create a navigation bar using CSS Markup: <nav> Navigation content </nav> <div id="mainContent"> Main page content </div> CSS: nav { position:fixed; height: X%; min-height: Ypx; } #mainContent { ...

htmlcssstylesheetstylus

Learn the steps to initiate a Vimeo video by simply clicking on an image

I have successfully implemented some code that works well with YouTube videos, but now I am looking to achieve the same effect with Vimeo videos. Does anyone have suggestions on how to do this? I need to replace the YouTube description with Vimeo, but I&ap ...

javascriptjqueryhtmlajax

What is the best way to ensure the website title is displayed properly on a mobile browser?

Concern I have been encountering difficulties while constructing a portfolio website using bootstrap 5. The issue arises with the navbar, causing the Title to overlap the hamburger menu and extend beyond the edge of the screen. Strangely enough, this prob ...

htmlcssnavbarbootstrap-5mobile-browser

Is there a way to determine if a table cell contains overflowing text compared to another cell?

https://i.sstatic.net/IYafA.png Is there a way to detect if the content of the fourth td overflows from the second td? I am looking for a method to determine which td has overflowed text and identify which td's text is overflowing. What approach ca ...

javascriptjqueryhtmlcss

Is there a problem with textbox support for multi-line strings?

I'm having trouble getting a textbox to display multiple lines of text. For instance, when I copy three lines of text from Microsoft Word and paste it into the textbox, only the first line appears. The other two lines are not showing up, and I'm ...

javajavascripthtmljsp

Difficulties arise when trying to align text vertically between two floating images

After running the code, I noticed that the text "Text Here" is positioned at the bottom of the div instead of the top. I have attempted to adjust it using properties like vertical-align, padding, and margin-top within the .subText styling, but so far, I ha ...

jqueryhtmlcss