Bootstrap 4 tooltip/popover with automatic fallback placement (utilizing two possible placement options)

In the past, Bootstrap 3 offered functionality to handle data-placement="left auto", which would display the tip on the left if there was sufficient space, or calculate an automatic placement if not.

However, Bootstrap 4 does not support the use of two placement values. You can only specify either left OR auto.

Are there any suggestions on how to achieve a similar effect in Bootstrap 4? I've been referencing this comment and examining the Bootstrap 3 JavaScript source code, but I'm struggling to determine the 'current height/width' of the tooltip for display. Additionally, I'm unsure about what should be used as the 'viewport' in Bootstrap 4 (assuming it could be the window object?)

javascriptbootstrap-4position

Answer №1

It's interesting to note that even though Bootstrap 4/popper no longer supports the 'dual' placement values that Bootstrap 3 did, it still seems to function as if 'auto' was automatically added. This means that if your placement is specified as only 'left' but there is not enough room, BS4/popper will adjust it to ensure it is visible. This makes the issue somewhat irrelevant. It's surprising that they even allow for an 'auto' placement in the first place. Ideally, developers should always specify their desired location and let popper handle any adjustments needed based on viewport limitations :)

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

Having trouble with your AngularJS ng-repeat functionality?

As a newcomer to AngularJs, I am still grappling with the basics. Currently, I am using the Soundcloud API to retrieve a list of followers for a specific user. In my $scope.init function, I have managed to establish a connection with Soundcloud, authentica ...

javascriptangularjsangularjs-ng-repeat

What is the best way to enhance the class following this condition in JavaScript?

Initially, the original script worked perfectly with just one class being added: function check_btn_charge() { if (parseInt(jQuery(".total-change-price").text()) >= 0) { jQuery(".btn-action-save-charge"+" "+"btn-danger" ...

javascriptjquerycssclass

Execute a particular NodeJS function within the package.json scripts section

I've got a NodeJS file with an export function that looks something like this: test.js exports.run = function(){ console.log('You execute this function!'); }; Is there a way to trigger this function specifically by using a custom comman ...

javascriptjsonnode.js

How do I find out the properties of individual components in Material UI?

Learning material ui has been a challenge for me as I struggle to figure out the properties available for each component. For instance, in a tutorial on YouTube, they used the AppBar component like this: <AppBar title="Enter user details" /> But ho ...

javascriptreactjsmaterial-ui

Display the array in the Vue view section without using curly braces

I am trying to display the following array in the view section without braces and quotations. Currently, it is showing with exact array containing braces and quotations. Array ["WHATSAPP", "2G", "CLIQ"] Code <v-col cols=& ...

javascriptvue.jsvuetify.js

Is it possible to position two fixed divs side by side?

I am currently in the process of building my online portfolio. I am looking to create two fixed divs that will not scroll, each occupying the full height of the page. The content between these two divs should be scrollable while the bars on the left and ri ...

htmlcsspositionfixed

Can anyone recommend a speedy sorting algorithm for an extensive list of objects in JavaScript?

Struggling to organize a large array of 2000 elements in ReactJS using JavaScript. The array includes: data = [ { index: 0, id: "404449", product_name: "ette", brand_name: "Dyrberg/Kern", base_pri ...

javascriptarraysreactjssorting

Is the position behind the object in Three JS?

Is there a way to determine if a position is behind a 3D character and not in front or to the side? I have a 3D character with predefined positions on the floor. I have attached a rough sketch to illustrate what I am trying to achieve (apologies for the po ...

javascriptthree.js

How to create a custom hover effect for IconButtons in Material-UI

Customizing Hover Effects on IconButton I am currently using an IconButton component from Material-UI and have noticed a subtle grey border that appears when hovering over the icon. I am looking for a way to disable this hover effect, as I cannot seem to ...

javascriptreactjsmaterial-ui

Issue persists: Ajax functionality remains nonfunctional, prompting the need for

My goal is to use the post input, and upon hitting enter, I want to dynamically replace <div id="mainPagePosts"></div> with new data without causing a page refresh. However, even after submitting the post, the page still refreshes, although I d ...

javascriptjqueryajax

Allow the json array to be transformed into a format suitable for input

Hey there, I've received a JSON array as the response of my ajax request: {"chart":{"2016-03-08":"1","2016-03-07":"4","2016-03-06":0,"2016-03-05" :0,"2016-03-04":0,"2016-03-03":"145","2016-03-02":0}} Now, I'm looking to create a chart using the ...

javascriptjqueryarraysjsoncharts

Accessing/Storing Pictures in MongoDB using Mongoose

I've been struggling with managing images in MongoDB for a while now. Everywhere I look suggests using GridFS because of the 16mb size limit per document. However, the documents I want to store are all <16mb each. Currently, I am storing it like th ...

javascriptnode.jsmongodb

The next.js Head component that is imported from next/head is not functioning correctly when used on share pages

I recently switched my website from create-react-app to create-next-app, but I'm having issues with the Head(app/head) component. Let's say I have a blog section with pages structured as follows: pages/blog/index.js and pages/blog/[slug].js. In ...

javascriptreactjsnext.jsserver-side-rendering

Steps for displaying a bootstrap modal in alignment with the triggering button's position

Recently diving into the world of bootstrap and AngularJs has been quite the learning experience for me. One challenge I encountered was trying to implement a bootstrap modal dialog box to show additional details within a table column. My goal was to hav ...

javascripthtmlcssangularjstwitter-bootstrap

Tips for concealing the cursor indefinitely in Typed JS

Is there a way to hide the cursor permanently in TypedJS so that it doesn't blink or show while typing? I've come across tutorials on hiding it after typing is complete, but not from the beginning. Any suggestions on how to achieve this? ...

javascripttypedjs

Utilize the power of jQuery accordion to organize and display your table

Is there a way to integrate jQuery UI Accordion with an HTML table so that columns can be collapsible? I have tried various methods but haven't been successful. Currently, this is what I have implemented: $(".col1, .col2").addClass("hidden"); $(".s ...

javascriptjqueryjquery-uiaccordionjquery-ui-accordion

Running into an issue while attempting to generate functions in nodejs

I'm currently working on a function to authenticate a URL for a fetch request. However, when I attempt to call this function within the app.post callback, my Node.js server throws an error: "TypeError: authenticateUrl(...) is not a function". Does Nod ...

javascriptnode.jsexpress

I'm struggling to understand how to insert the JSON response into an HTML element

I am encountering an issue with my code where the response from the API call is not displaying on the HTML page. I'm unsure why it's not showing up even though the page loads successfully. <!DOCTYPE html> <html> <head> <title ...

javascripthtmlnode.js

The filtering feature in AngularJS ng-options is not functioning correctly

Greetings, I am a newcomer to angular. In my current demo application, I have created a list of users with a select filter using ng-option. There seems to be a bug that I have been unable to identify. The issue: When I select the Female option, i ...

javascriptangularjsng-options

jQuery Waypoints Error: The sticky functionality is missing and cannot be utilized in this context

Trying to anchor an element at the top of a WordPress page using the jQuery Waypoints plugin. <script src="path/to/waypoints.min.js"></script> <script> $('#myelement').waypoint('sticky'); </script> However, t ...

javascriptjquerywordpressjquery-waypoints