Ensuring that all popovers are horizontally aligned across the entire page

My Bootstrap form comes with several input fields, some of which are in multicolumn rows, and I would like them to display a popover upon focus.

While the standard implementation allows me to show a popover next to the input field, my preference is to have the popover displayed next to the entire form.

Currently, all my popovers are initialized based on the data-toggle attribute:

    $('[data-toggle="popover"]').popover({
        'trigger': 'focus'
    });

I attempted to create a popover for the entire form and trigger it using the individual fields. However, when I adjusted the popover's position using

$('.popover').css({top: diff});, it consistently reverted back due to auto-repositioning.

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

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

javascriptcssbootstrap-4bootstrap-popover

Answer №1

To achieve this effect, the .popover element already has a position:absolute property set, so we just need to adjust it to move towards the left. However, the arrow is pointing towards the outer edge, so we need to flip the arrow and position it on the left edge of the popover div;

See the code snippet below for reference:

$('[data-toggle="popover"]').popover({
  'trigger': 'focus',
});
.popover {
  border: 1px solid red;
  left: 87% !important;
  margin-left: 10px;
}


/* .popover .arrow{ display: none;} */

.bs-popover-auto[x-placement^=left]>.arrow,
.bs-popover-left>.arrow {
  right: 0;
  left: -9px;
  transform: rotateY(180deg);
}
<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.1/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>

<div class="container">
  <h2>Form with custom placement of Popovers</h2>

  <form action="" class="was-validated">
    <div class="form-group">
      <label for="uname">Username:</label>
      <input type="text" class="form-control" id="uname" placeholder="Enter username" name="uname" data-toggle="popover" data-placement="right" title="Popover Header" data-content="Some content inside the popover">
    </div>

    <div class="form-group">
      <label for="pwd">Password:</label>
      <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd" data-toggle="popover" data-placement="right" title="Popover Header" data-content="Some content inside the popover">
    </div>

    <button type="submit" class="btn btn-primary">Submit</button>
  </form>
</div>

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 sets apart the concept of asynchrony in C# from that in JavaScript?

When working with Python and JavaScript, a common issue arises due to blocking the event loop. This occurs when code is executed in a single thread and only one synchronous operation can be performed at a time. Interestingly, this problem does not seem t ...

javascriptc#asynchronousevent-loop

Passing properties from the parent component to the child component in Vue3JS using TypeScript

Today marks my inaugural experience with VueJS, as we delve into a class project utilizing TypeScript. The task at hand is to transfer the attributes of the tabsData variable from the parent component (the view) to the child (the view component). Allow me ...

javascripttypescriptvue.jsvuejs3

Babel had trouble transpiling due to an unexpected token while working with Bootstrap 4 and Codekit

Currently attempting to minify and transpile Bootstrap 4 using CodeKit3. However, encountering the following error: Babel: Failed to Transpile: SyntaxError: /bootstrap/carousel.js: Unexpected token (219:8) 217 | _getConfig(config) { 218 | ...

javascriptbootstrap-4babeljscodekit

Tips for creating a script to calculate the population count of a 16-bit integer with either php or javascript

Looking to write a function that calculates the population count of a 16-bit integer in either php or javascript? Population count refers to the number of "turned on" bits, essentially counting the number of ones in the binary representation. For example, ...

phpjavascriptajax

Overlapping input elements occur when Twitter bootstrap prepended input elements are positioned side by side

I ran into an issue while attempting to place two input elements side by side, with a prefixed item on the first input, using display:table styles. Unfortunately, the second input element ends up overlapping the first. I tried using box-sizing: border-box ...

htmlcsstwitter-bootstraptextinput

Tips for aligning text at the bottom of a div that has been floated to the right alongside another div

I have a parent container with two child divs inside; one div is floated to the left and the other is floated to the right. Here is my current layout: ┌─────────────┬─────────────┐ │ Text left ...

htmlcss

Determine the value from an object in the view by evaluating a string in dot notation

Seeking assistance with a recurring issue I've encountered lately. Imagine having two objects in AngularJS: $scope.fields = ['info.name', 'info.category', 'rate.health'] $scope.rows = [{ info: { name: "Apple", cate ...

javascriptangularjs

Is there a way to obtain cookies on a Server-side component in the latest version of Next.js?

import axios from "axios"; const Api = axios.create({ baseURL: "http://127.0.0.1:5000", }); axios.defaults.headers.common["Authorization"] = cookie; In server-side environment, document.cookie is not accessible. Alternat ...

javascriptreactjscookiesnext.jsaxios

Transforming an array into key-value pairs where the keys are odd elements and the values are even elements

Is there a straightforward way to transform this initial array: [ "Bargain", "deal", "Consistent", "Steady; regular", "Accurately", "a thing bought or offered for sale much more cheaply than is usual or expected.", "Charge", "demand (an am ...

javascriptarrays

What could be the reason I am unable to choose data properties from the dropdown options?

There are two different dropdowns for clothing types and colors. When a type of clothing is selected from the first dropdown, JSON data will fill the second dropdown with options based on the first dropdown selection. After selecting an option from the se ...

javascriptjqueryjson

What is the proper way to retrieve the Nuxt context within the fetch() hook?

Is there a way to access the props within an async fetch() function when also using async fetch(context)? I'm trying to figure out how to work with both simultaneously. ...

javascriptvue.jsnuxt.js

Searching for array keys in JavaScript/jQuery can be done with the indexOf method

I am facing an issue with searching through an array named members. Each element in this array consists of a name as the index (e.g. "John Smith") and an array with "degree" and "id". Here is an example structure: https://i.sstatic.net/bDI2Y.png My searc ...

javascriptjqueryarrays

Is it permissible to employ both CSS pseudo-elements, namely before and after, on a single selector in this instance?

Seeking to create a visually appealing horizontal menu navigation resembling: {image1} ITEM1 [separator1] {image2} ITEM2 [separator2] etc. However, a constraint exists - the HTML structure must remain unchanged. Can this be achieved solely with CSS us ...

csscss-selectors

Comparing AngularJS $interpolate with $filter

AngularJS offers different tools for manipulating data displayed to users. While $filter is commonly used for formatting data, $interpolate enables real-time updates within a text string. Do $interpolate and $filter have any connection? How do they differ ...

javascriptangularjsangularjs-filterangularjs-interpolate

Is it possible to verify an email address using a "Stealthy Form"?

I am exploring the use of HTML5's type="email" validation to develop a function for validating email addresses. My goal is to create a form and add an input that has its type set as email. By attempting to submit the form, I aim to determine whether ...

javascriptvalidationemail

Having trouble retrieving JSON with crossDomain jQuery AJAX

The process I followed was creating a rails 3.0 scaffold and exposing it using json, keeping it running. When accessing http://localhost:3001/objects.json I can view json data in the browser Next, I had a simple html file with code.jquery.com/jquery-1.7 ...

javascriptjqueryajaxruby-on-rails-3cross-domain

Ways to add a string to an array as a labeled object in javascript?

Is there a way to manipulate the array in imageCollection to achieve the format of the array in carouselPhotos as shown below? export default class HomeScreen extends Component { state = { imageCollection: [ { name: "P ...

javascriptarraysreactjsreact-native

npm-bundle encounters an issue with Error: ENOENT when it cannot find the file or directory specified as 'package.json'

npm-bundle is throwing an error that says Error: ENOENT: no such file or directory, open 'package.json' in my NodeJs project. It works fine if I manually create test.js and package.json, then run npm install followed by npm-bundle. However, when ...

javascriptnode.jstypescriptnpm

Divide using two separators

const inputString = 'db.employee.find({"city":"Paris"},{"emp_id":1}' const result = inputString.split(/\.|\[); // splitting based on . or [ Is there a way to split a string based on two delimiters, such as . and [? For example, if we ...

javascriptarrayssplit

Is there a way to format this text horizontally?

Hey there, I'm trying to align the h4 with the p text. I attempted using display: inline-block, but it didn't do the trick. Can anyone lend a hand? Thanks in advance for any help! <h4>2.1</h4><p> Please refrain from blasphemy ...

htmlcss