Mastering the Placement of Popover Arrows in Bootstrap 4

I'm currently experimenting with using popover in Bootstrap 4. I have set the toggle button to appear on the top right corner.

Initially, when I set the popover placement to 'bottom' like this:

    $(function () {
$('[data-toggle="popover"]').popover({
placement: 'bottom'
})

The popover ends up being displayed partially off the screen as shown here:

https://i.sstatic.net/ZY7PZ.jpg

Next, I attempted using 'auto' instead of 'bottom' for placement, but unfortunately, the popover did not work...

Afterwards, I reverted back to using 'bottom' for placement and adjusted the offset to move the popover 50px to the left while increasing its width:

$('[data-toggle="popover"]').popover({
placement: 'bottom',
offset: '0 50px'
})

CSS:

.popover-content{
width: 270px;
}

As a result, the popover now appears like this:

https://i.sstatic.net/MzamR.jpg

However, the position of the popover-arrow is incorrect. I tried adjusting the arrow position using the 'shown.bs.popover' event like this:

 $('[data-toggle="popover"]').on('shown.bs.popover', function () {
 $('.popover.bottom .popover-arrow:after').css('right', 50 + 'px');
});

Unfortunately, this adjustment did not have any effect....

Does anyone have a solution for repositioning the arrow or hiding it when it appears?

Thank you in advance.

javascripttwitter-bootstrappopoverbootstrap-4

Answer №1

To adjust the arrow's position, use the following styling options:

For Bootstrap 3

.popover.bottom > .arrow {
    margin-left: 50px;
}

For Bootstrap 4

.popover.bs-tether-element-attached-top::after,
.popover.bs-tether-element-attached-top::before{
    left: 65%;
}

Answer №2

If you're considering giving React-Bootstrap v1 a shot, make sure it's utilizing Bootstrap 4 to bootstrap the popover arrow. You can customize the arrow position by targeting the following class:

Upgrade to React-Bootstrap v1.0.0-beta.5 now

.popover .arrow::after,
.popover .arrow::before {
  left: 104px;
}

Answer №3

If you're using Bootstrap 4, here's a solution I came up with:

To make it work in JQuery, you need to listen for the event show.bs.popover:

$('#element-id').on('show.bs.popover', function(){
});

Inside that event, you can apply CSS changes to the .popover element like this:

$('.popover').css('left', '65%');

If it doesn't work, it could be because the code is executed before the element is visible on the page. In that case, try adding a timeout before applying the CSS changes. Here's how you can do it:

$('#element-id').on('show.bs.popover', function(){
  setTimeout(function(){
    $('.popover').css('left', '65%');
  }, 1);
});

This solution is specific to popovers, but you can tweak it further based on your needs.

Alternatively, you can add a CSS rule to your stylesheet for the .popover element with !important, like this:

.popover { left: 65% !important; }

Answer №4

Here is the approach I took:

$('[data-toggle="popover"]').on('show.bs.popover', function () {
setTimeout(function () {
    $('.popover.fade.show').each(function () {
        var $this = $(this);
        if (!$this.hasClass('left-loaded')) {
            $this.addClass('left-loaded')
            var $left = parseInt($('.arrow', $this).css('left')) + parseInt(30) + "px"; 
           // adjust 30 as needed
            $this.find('.arrow').css('left', $left);
        }
    })

}, 100);
});

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

What's the reason behind the bootstrap class d-sm-none showing the image even on small screens?

I need a row that consists of 2 columns using bootstrap4: 1st column should have a width of 9 in all viewports 2nd column takes a width of 3 in lg and md viewports but should be hidden in the sm viewport. I attempted to achieve this using d-none/d-sm-none ...

htmlbootstrap-4

Having trouble updating $scope after integrating the Parse JS SDK into Angular.js services?

Apologies for any language barriers in my communication. I am currently working on developing a page for reporting current work progress. As part of this task, I have created a function called getWeek() to obtain the current week of the month and store u ...

javascriptangularjs

Troubleshooting issue with v8 callback failure when interacting with JavaScript objects stored on the heap

Creating an instance of a JavaScript object is easy, for example; myObj1 = new myObject("Object1"); Next step is to call a node.js c++ addon which triggers a callback to the Javascript object... myAddon = require('myAddon'); myAddon.greet(myOb ...

javascriptc++callbacknode.js-addon

Unable to render properly after saving to Firebase

Currently, I am working on developing an express app that creates a Google map using geo coordinates extracted from photos. My goal is to utilize Firebase for storing data related to the images. While my code is functioning properly, I encountered an issue ...

javascriptnode.jsexpressfirebasestormpath

Unable to execute findOneAndUpdate as a function

I've been researching all morning and testing different solutions, but I'm still unable to resolve this issue. Every time I run the code below, I receive the error "TypeError: req.user.findOneAndUpdate is not a function": req.user.findOneAndUpd ...

javascriptnode.jsmongodbexpressmongoose

Is it possible for me to determine whether a javascript file has been executed?

I am currently working with an express framework on Node.js and I have a requirement to dynamically change the value (increase or decrease) of a variable in my testing module every time the module is executed. Is there a way to determine if the file has ...

javascriptnode.jsexpress

Should URL parameters be avoided as a method for retrieving data with React Router in a React application?

Within my application, there exists a main page labeled Home that contains a subpage named Posts. The routing structure is as follows: <Route path='/' element={<Home />} /> <Route path='/posts/popular' element={<Post ...

javascriptreactjsexpressaxiosurl-parameters

How can we enable SOAJS to operate on NodeJS versions higher than 0.12?

Currently, We were required to revert our NodeJS platform back to version 0.12 in order for our SOAjs dashboard to function properly. What changes need to be made in our SOAjs implementation to support the latest NodeJS versions? Thank you ...

javascriptnode.jssoajs

Guide to dynamically using array.map based on a condition in React

I am encountering an issue with a modal screen that contains two dropdowns and a text input field. The problem arises when the second dropdown is set to “is empty”, as the text input field should then disappear, leaving just the two dropdown inputs on ...

javascriptreactjsarraysconditional-statementsjsx

Struggling to make things function properly after the content changes following an ajax page load

Whenever the page loads, I execute this function to hide lengthy quoted posts by turning them into clickable links. This helps in preventing excessively long comments on my website: function hide_long_quotes() { $('.comments .comment_quote'). ...

javascriptjqueryajax

The filtering functionality appears to be malfunctioning

There's a table that I need help with: https://i.sstatic.net/ywTgQ.png Underneath the header, there is an "Apply Filter" button which should filter the data in the table based on user input. The issue is that when I click the button, nothing happen ...

javascripthtmlsqlajax

What could be causing the show() method to malfunction in jQuery?

My attempt at creating a basic slideshow using jQuery involves only 3 images in rotation. To navigate between images, I have utilized the next() method in my code. Here is how it is meant to function: Upon clicking a link (class="next"), a funct ...

javascripthtmljquerysliderslideshow

The first instance of an object retains its class, but subsequent instances may change

Trying to articulate my query concisely is proving challenging. Let me do my best to provide a clear explanation. The fixed header on my website features 4 buttons. I've created a JavaScript file that alters the class of each button when clicked. The ...

javascripthtmlcss

Does JSON hijacking play a role with IE versions greater than 10 or Chrome versions greater than 30?

OWASP suggests wrapping json response with an object rather than returning a direct array. For instance: [{"id":5}] Is this vulnerability still relevant? Could it be exploited? After testing in Chrome, IE, and FF, I couldn't find a way to 'h ...

javascriptarraysjsonsecurity

When a key is pressed, apply a background color and fade out effect using JavaScript

Whenever the enter key is pressed, I want to make a red color appear briefly and then fade out quickly to create a blinking effect. I attempted adding a new class on Keypress that would transition the opacity to 0: function enterpressalert(e, text) { ...

javascripthtmlcss

Encountering an error with TypeScript in combination with Angular 2 and Grunt. The error message is TS

Currently in my angular2 Project, I am utilizing grunt for automating the compilation of my typescript files. Everything seems to be working fine as my files are compiling, but I keep encountering errors: app/webapp/ng2/audit_logs/auditLogs.ts(2,3): erro ...

javascriptangularjstypescriptangulargrunt-ts

Calculating the disparity between two dates using a predetermined format

const calculateChatDateFormat = (chatDate) => { // round to the nearest whole number const dt = Moment(chatDate).format('MMMM Do YYYY, h:mm:ss a'); // March 9th 2021, 7:16:16 pm; const dtNow = Moment(new Date()).format('MMMM D ...

javascriptreactjsreact-nativeexpo

Error in ASP.NET/C# - utilizing Ajax to pass selected value from a dropdown menu

I've been working on linking two drop down lists using JQuery AJAX, but so far I haven't had any success. Here's my ASP.NET code for the drop downs: <td><a href="#" title="Choose the park that you would like. Mandatory Field."> ...

javascriptc#jqueryasp.netajax

Integrating data between Java and JavaScript within the Wikitude platform is essential for leveraging AR.RelativeLocation

After passing an integer from Java to JavaScript, I am attempting to use the value to adjust the altitude of an object. I included the variable in RelativeLocation var location = new AR.RelativeLocation(null, 8, 0, a); The issue arises when it disregards ...

javascriptandroidwikitude

Encountering a 500 error in Angular while utilizing forkJoin for calling API services

In my Angular 7 project, I have implemented a call in the ngOnInit method to two different API routes to fetch some data using forkJoin. Here is how I have set it up: ngOnInit() { debugger this.route.params.pipe( switchMap(params => for ...

javascriptangularapipipefork-join