The Bootstrap popover is displaying over a distinct element, rather than its designated trigger

I am trying to make the popover display near a different element rather than the trigger. My current setup looks like this:

$triggerElement.popover({
    title: varTitle,
    content: varContent,
    html: true,
    placement: 'auto top',
    trigger: 'manual'
});
..........
<div class="shopper"></div> 

<button type="button" class="btn btn-primary">Add</button>

Right now, when I click the button, the popup appears at the bottom of the page as expected. However, I want it to appear near the top right corner of the 'shopper' div (just below the div). Is there a way to achieve this using a selector or can someone assist me with CSS?

The popover is currently displayed above the button when triggered, but I would like it to be displayed just below the shopper div tag instead. Essentially, I want the shopper div tag to act as the trigger for the popover.

jqueryhtmlcsstwitter-bootstrap

Answer №1

It seems like you're looking to manually control the visibility of a popover using jQuery. Here's an example of how you can achieve that:

$('.user').popover({
  title: "dynamicTitle",
  content: "dynamicContent",
  html: true,
  placement: 'bottom',
  trigger: 'manual'
});

$('#showPopoverBtn').click(function(){
  $('.user').popover('toggle');
});

Check out the demo here: http://www.bootply.com/9iK3qpLa29

Answer №2

Utilizing bootstrap to create a function where text from another source triggers a popover on a selected textbox.

$(function () {
     var showPopover = function () {
        $(this).popover('show');
    }
    , hidePopover = function () {
        $(this).popover('hide');
    };
    
    $('#has-popover').popover({
        content: 'Popover content',
        trigger: 'manual'
    })
    .focus(showPopover)
    .blur(hidePopover)
    .hover(showPopover, hidePopover);
    
    $('#no-popover').on('change',function(){
debugger;
$('#has-popover').popover('show');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.css" rel="stylesheet"/>

<input id='no-popover' type='text' placeholder='write here something to popover on next textbox'/>
<input id='has-popover' type='text' placeholder='hover or focus me' />

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

CSS resetting can lead to tables appearing misaligned

After applying a CSS reset to my website's stylesheet (which is valid as CSS 2.0 and used with XHTML 1.0 transitional webpage), I noticed that a table on my website no longer looks correct. Specifically, the table is now positioned incorrectly and the ...

htmlcssxhtmlcss-tables

Ways to expand the dimensions of a Popup while including text

I am using a bootstrap modal popup that contains a Treeview control in the body. The issue arises when the node's text width exceeds the popup's width, causing the text to overflow outside of the popup. Is there a way to dynamically adjust the ...

javascriptjqueryhtmlcsstwitter-bootstrap

Using AJAX to showcase information on a different webpage

Below is a function that is executed when a button is clicked. It sends JSON data to the "temp.php" page using Ajax. The data sending process appears successful, but I am struggling with printing/displaying the data sent by Ajax on the "temp.php" page. ...

javascriptphpjqueryajaxweb

Issue with CakePdf unable to properly render CSS styling

I am having issues with the CakePdf Plugin (CakePdf.DomPdf) as it is not recognizing my stylesheet. Despite copying my /View/Layouts/default.ctp to /View/Layouts/pdf/default.ctp, the pdf file generated does not reflect the styling. Could this be due to t ...

csscakephp

What is the best way to send an object to Vue Component?

How can I properly call a Vue Component with a data object? The todo-item tag works as expected, but the todo-item2 tag does not produce any output. I was expecting the same result. Here is the HTML code: <div id="app"> <todo-item v-bind:te ...

javascripthtmlvue.js

Load content into multiple divs simultaneously using jQuery

Here is the code snippet I am currently using: $("#box1").load(""+ siteAddress +"page/internal-url-1/"); $("#box2").load(""+ siteAddress +"page/internal-url-2/"); var refreshId = setInterval(function(){ $("#box1").load(""+ siteAddress +"page/int ...

phpjavascriptajaxjquery

padding applied exclusively to the Bootstrap column when viewed on a large grid

Can padding be added only for the large grid and not for the medium grid? Large grid with padding: <div class="col-lg-4 pl-3"> </div> Medium grid without padding: <div class="col-md-3"> </div> ...

htmlcssbootstrap-4

advancement in the $.when function

In an attempt to make an AJAX call utilizing the $.when and $.then functions, I am employing these features to populate a template. During this process, I aim to display a message in a form that states: "Loading data... please wait." I have come across ...

javascriptjqueryajaxasynchronous

Identify when users reach the end of a webpage through scrolling using mousewheel actions and scroll events

I want to track when a user reaches the end of a page and tries to scroll further, even though there is no more content to see. One of my usability metrics includes identifying dead scrolls, so I need a reliable way to detect when users attempt to scroll ...

javascriptjqueryscrollmousewheel

Challenge encountered when trying to reference a JavaScript file within an HTML document

I am encountering an issue with two files - TestKeyboard.html and AutomaticKeyboardChange.js. The HTML file looks like this: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> ...

javascripthtmlkeyboard

The issue with focus not functioning properly seems to be specific to Mozilla Firefox

My issue lies in validating a date using jQuery. The objective is to set focus on the same control if an invalid date is entered by the user. Currently, my code works well across all browsers except for Mozilla where it fails. Javascript Code: function Che ...

javascriptjqueryasp.netfocus

Updating a C# variable in real-time using JavaScript or JQuery

In the following code snippet, images from the image list are displayed when they have the value "Airport" in the imagesublist. For instance, the structure of imagesublist would be like: {[image1,Airport],[image2,Retail]} The code snippet only shows imag ...

javascriptc#jqueryasp.net

How come using ng-model twice on an input field is effective?

Working with a form that requires two values for ng-model has led to some interesting discoveries. Initially, attempting to assign two different values to ng-model seemed impossible. However, an experiment using ng-model twice yielded surprising results. T ...

javascripthtmlangularjs

PHP script unable to identify AJAX request as a POST method

I'm facing an issue while trying to submit a form to a PHP script. The problem arises during the validation process where it fails to recognize the request as a POST request and exits from the PHP script. Surprisingly, the AJAX request registers as su ...

javascriptphpjqueryajaxforms

What is the best way to insert additional HTML elements beneath a video background that extends into the navigation bar?

*{ padding: 0; margin: 0; text-decoration: none; list-style: none; box-sizing: border-box; } body{ font-family: montserrat; } nav{ height: 85px; width: 100%; z-index:1001; } lab ...

htmlcss

How can I send a variable into the DOM using AJAX?

Apologies for posting a question earlier about creating a condition for checkbox without proper investigation. It appears that I need to pass my variables here. function setsession(sessionid, action, data) { $("#totalselection").show(); $. ...

javascriptphpjqueryajax

Step-by-step guide to keep a table row always visible at the top of the

Is there a way to make the first row in a table with only td elements fixed (labels)? The table structure is as follows: <table> <tr> <td>Name:</td> <td>Age:</td> </tr> <tr> <td>John& ...

htmlcss

Use javascript to modify a specific section of a link

I have a set of datatable rows with links that contain data, and I need to modify part of the link text. For instance, if the link is 200.0.0.10, I want to change it to 160.11.10.12. Despite attempting the following code, the link does not change: var ...

javascriptphpjqueryajax

Names of VueJs components

Currently, I am coding in VueJS and encountering the following scenario <li @click = "selectedComponent = 'appManagment'"><i class="ion-clipboard"></i>Management</li> My goal is to have the name displayed as {{selectedCo ...

htmlvue.js

Retrieve the numerical worth of a specific offspring component

I am currently working with the following HTML structure: <td class=​"prd-var-price"> ​<div class=​"price-total">​ <span class=​"price-unit">​€​</span> ​<span class=​"price-value">​ ...

javascriptjquery