The right data-placement tooltip seems to be malfunctioning

Initially, the tooltip functions correctly for top, bottom, and left directions. However, it fails to display properly when set to right.

This issue seems to be related to the CSS or HTML structure, even though the tooltip is positioned absolutely. The following HTML code snippet illustrates this:

HTML

<li class="">
    <div class="hover-highlight ml-2">
        <a class="" href="#">
            <i data-toggle="tooltip"  title="Dashboard" class="icon-meter"></i>
            <span>Dasboard</span>
        </a>
    </div>
</li>

Within the javascript section, the following script attempts to address the issue:

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

Despite functioning correctly with other placements, there are problems specific to the right alignment. The rendered output mistakenly shows properties aligned to the left:

<div class="tooltip fade show bs-tooltip-left" role="tooltip" id="tooltip558151" style="position: absolute; transform: translate3d(125px, 207px, 0px); top: 0px; left: 0px; will-change: transform;" x-placement="left">
    <div class="arrow" style="top: 8px;" />
    <div class="tooltip-inner">Dashboard</div>
</div>

The Issue

Further investigation revealed that Bootstrap automatically adjusts text placement relative to the parent div. This behavior limits the ability to force the tooltip to appear on the right side of the window.

A solution to override this default behavior remains elusive.

CODE

To review the code, visit here:

javascriptbootstrap-4tooltip

Answer №2

If anyone happens to stumble upon this in the future, here's a solution that worked for me when facing a similar issue. I found that setting the boundary to "window" prevented the tooltip from being restricted within its parent container. Check out https://getbootstrap.com/docs/4.0/components/tooltips/#options for more options.

<button title="tooltip text" data-toggle="tooltip" data-placement="right" data-boundary="window">

Answer №3

the issue lies within the margins of the div element, see below for details: 

$(document).ready(function() {
    $("body").tooltip({ selector: '[data-toggle=tooltip]',placement: 'top' });
});
.theproblem {
  margin-left:140px;
  margin-top:140px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
    <div data-toggle="tooltip" title="User Management" class="theproblem">
    Hello World
    </div>
  </div>

</div>

see also Fiddle

Answer №4

Top recommendation:

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

  $(this).data('bs.tooltip').config.placement = 'right';// Adjusting position dynamically
  $(this).data('bs.tooltip').config.boundary= 'right'; // Specify tooltip boundary
});

Answer №5

To ensure the proper functioning of this feature, remember to input the text into a designated data property within the element.

$(function () {
    $('[data-toggle="tooltip"]').tooltip({
        placement: 'right'
    });
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<li class="">
  <div class="hover-highlight ml-2">
    <a class="" href="#">
        <i data-toggle="tooltip" title="Dashboard" class="icon-meter">
          <span>Dasboard</span>
        </i>
      </a>
  </div>
</li>               

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

Answer №6

Encountered a similar issue where the parent div's overflow was causing trouble. Resolved by switching from overflow: auto to overflow: visible, which successfully resolved the problem.

Answer №7

In my opinion, the ideal solution is to store the placement information in a data property of the element:

<button data-toggle="tooltip" data-placement="left"> tooltip </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

The close button on bootstrapselect is oversized

Having an issue with implementing the bootstrap select search and close button in my view. An image has been uploaded through the following link: View the bootstrap select dropdown image here Javascript $('#class_list_for_fee_report').multisel ...

javascriptphpjqueryhtmlbootstrap-select

Dispose the inputpicker filter after setting the value

I am currently utilizing the "Jquery inputpicker plugin" for creating dropdown menus. More information about this plugin can be found here. To initialize my dropdown, I use the following code: $('#test').inputpicker({ data:[ {value:"1 ...

javascriptjqueryinputdropdown

Optimal placement and size for the slick slider

I am new to CSS and currently experimenting with the Slick slider on a project: My setup involves a div container that spans 100% of the width of the page. Inside this container, there is another div (housing the slider) that takes up 80% of the width. D ...

javascriptjqueryhtmlcss

issue with unknown values in Vuejs array of objects

Struggling to create an array of objects, but encountering an issue where the first 83 objects are returning as undefined while only the last 4 have the correct data. Despite multiple attempts to refactor the code, a solution remains elusive. Here is the ...

javascriptvue.jsapexcharts

Building a single page web application using TypeScript and webpack - a step-by-step guide

For a while now, I've been working on single page applications using Angular. However, I'm interested in creating a single page application without utilizing the entire framework. My goal is to have just one .html file and one javascript file, w ...

javascriptnode.jstypescriptnpmwebpack

Don't forget to save the toggleClass state to local storage in jQuery so it persists after

It's a challenge to maintain the value of toggleClass after refreshing or reloading the page. I have a structured table where rows toggle visibility when clicked. To preserve these toggle values, I utilized localStorage, but unfortunately, the state i ...

javascriptjqueryasp.net-mvc

Conditional statements in jQuery for identifying a specific div based on its id

My current setup involves an HTML table that gets populated based on a mysql query. The table is enclosed within: <div id="punchclock" class="timecard"> I also have a jQuery script in place to calculate the totals of the times entered into this tab ...

javascriptjqueryhtmlmysql

Guide on adjusting the darkness of a MaterialUI Avatar component image and adding text to it

I'm currently working with the Avatar component from Material UI along with Tailwind CSS. I found that by simply adding the image URL to the src, it displays the avatar successfully. <Avatar alt="Cindy Baker" src="https://mui.com/sta ...

javascriptcssreactjsmaterial-uitailwind-css

Ways to retrieve an object from a separate function in JavaScript

I am struggling to fetch data from an array and store it in an object. However, every time I try, I end up with either an empty object or a Promise { <pending> } shown in the logs. I have attempted to use a global variable to store the data and acc ...

javascriptnode.jsobject

What is the method for importing styles in Next.js without including the file extension?

I've got a project set up with Next.js, TypeScript, and SCSS. In every app/*/page.tsx or components/*/page.tsx, there's a line importing the stylesheet like import style from "styles/*/index.module.scss". I find these lines to be too lo ...

javascriptnode.jstypescriptnext.jssass

Problem with selecting items in Kendo UI Menu

Problem: The select event is not triggering when clicking on the image in the kendo menu item. My troubleshooting steps: Review the sample code provided below <!DOCTYPE html> <html> <head> <base href="http://demos.telerik.com/ken ...

javascriptjsonasp.net-mvckendo-uikendo-menu

What is the best way to include the existing query string value in the hyperlinks on my page?

My main coding objective is to simultaneously search multiple websites. To accomplish this, I want to create a query string containing the search terms (primarily for analytics purposes) using a form. By utilizing JavaScript, I am aiming to include the s ...

javascriptjqueryhtmlarraysquery-string

Using jQuery to dynamically select all rows (`tr`) that contain table data cells (`td`) matching

Although my title may seem confusing, it's the best I could come up with. I'm looking to identify all tr elements that contain td elements matching specific filter criteria. Here is an example: <tr class="row" id="1"> <td class="ph ...

javascriptjqueryhtml

Display a loading spinner on the browser while the form is being submitted

My current project involves using AJAX to retrieve data and populate a form. The data being fetched is quite large, resulting in a delay as it is fetched from the database and filled into the form fields. During this process, I display a loading icon to in ...

javascriptphpjqueryajaxforms

Change the size of the font with a slider in VueJS

I have been utilizing the project found at This particular project allows end-users to reuse Vue components as editable sections by providing a styler overlay for adjusting content within a div or section. After installation, I added a slider which now ap ...

javascriptvue.jsslider

What strategies can be used to steer clear of overhyped products after adjusting state?

I have a function that retrieves data from Firebase. After getting the data, I want to set it into a state. So, I create an array and push all the data into it. Then, I update my state with this array. However, when I log or render this state, I encounter ...

javascriptreactjsfirebase-realtime-database

The Express.js server seems to be having trouble rendering a static JavaScript file

Currently, I am in the process of constructing a website and have implemented an express.js server to collect data submitted through a form. Prior to configuring the server, I had already developed the site using static js and css files. Once the connectio ...

javascriptnode.jsexpress

JS - what could be causing this to not work properly? Could there be a bug that

Can anyone help me troubleshoot this code? It is supposed to add a search parameter page=value to the URL and load the page, but it's not working. I'm not sure if there's a typo in there. $(function(){ $('.page').on('cl ...

javascriptdjango

Use React to increment a variable by a random value until it reaches a specific threshold

I am currently working on creating a simulated loading bar, similar to the one seen on YouTube videos. My goal is for it to last 1.5 seconds, which is the average time it takes for my page to load. However, I have encountered an issue with the following co ...

javascriptreactjs

Encountering a Typescript error when attempting to access the 'submitter' property on type 'Event' in order to retrieve a value in a |REACT| application

I am facing an issue with my React form that contains two submit buttons which need to hit different endpoints using Axios. When I attempt to retrieve the value of the form submitter (to determine which endpoint to target), I encounter an error while work ...

javascriptreactjstypescriptforms