Trigger the display of Bootstrap Popover by clicking on its child elements

I currently have a div with multiple child elements. I followed the popover settings provided in the documentation. However, when I click on my element, the popover only appears when I click outside of its children. For instance, if I click on the user profile image icon or the username, the popover doesn't show up. But if I click on the white space within the element but not directly on them, it does appear. See the image below:

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

<div class="user-info user-image chat_user loadChatroom friend-view" data-toggle="popover" data-placement="top" data-content="content.">
  <span class="user-pic">
    <%= image_tag friend.profile_image_url, class: "img-fluid profileImage" %>
  </span>
  <span>
    <strong><%= friend.user_name %></strong>
  </span>
</div>

Despite searching online, I couldn't find any relevant information about this issue. Any help would be greatly appreciated. Thank you!

htmlcsstwitter-bootstrapbootstrap-4popover

Answer №1

In the following example, clicking any child element triggers the popper correctly. If you are experiencing issues, consider the following:

  1. Ensure that you are using the correct versions of jQuery, Popper.js, and Bootstrap as shown below.

  2. Verify your popper JS configuration against the provided working example.

$(function() {
  $('[data-toggle="popover"]').popover();
})
.user-info {
  margin: 10px;
  border: 2px solid #ddd;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- necessary for bootstrap .popper() -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<!-- bootstrap -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>

<div class="user-info user-image chat_user loadChatroom friend-view" data-toggle="popover" data-placement="bottom" data-content="content.">
  <span class="user-pic">
    <img src="https://via.placeholder.com/50" class"img-fluid profileImage">
  </span>
  <span>
    <strong>User Name</strong>
  </span>
</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

Load a variety of tiles to create a unique style and background for the

Currently, I am using this function to randomly retrieve an image. <script> window.onload = choosePic; var myPix = new Array( "https://ry3yr.github.io/OSTR/Diarykeepers_Homepage/extrafiles/images/bgfiles/cool_stuff_anim.gif", "https:// ...

cssimagerandom

Utilizing the change() and contains() functions with an HTML <select> element in jQuery

Currently, I am working on a feature where images change based on the value selected from a dropdown menu. The code provided below is a simplified version to convey the main idea. Here's the gist of what I have (feel free to ask any questions; please ...

javascriptjqueryhtmlcontains

Implementing HTML tags in C# code

Below is an example of HTML script: <h1> This is heading one </h1> <p> This is paragraph. </p> I would appreciate any recommendations on how to add <html></html> tags to the above script using C#. ...

c#htmlvisual-studio-2010

Tips for creating responsive text within a hero image

I'm exploring the world of creating responsive websites using Bootstrap, a new venture for me. One challenge I've encountered is trying to create a hero image with text positioned perfectly in the center. Despite my efforts, the text does not adj ...

htmlcssresponsive-designbootstrap-5

A step-by-step guide on showcasing a Word document in a popup window using MVC 4 Razor

I'm looking to display a Word file in a pop-up window using MVC 4 Razor. The file is located at a specific path and has already been stored in my project. ...

htmlasp.net-mvc-4

Why does the IMG keep loading every time the web page is refreshed?

I am experiencing an issue with my html page where the background images are not reloading when I refresh the page, but the logo image is. The background images are called through an external CSS file, while the logo is used with an <image> tag. Wh ...

htmlcss

Using CSS and HTML to match the font sizes to the PSD design specifications

Is there a way to match the font size in HTML/CSS with a specific point value from a PSD design? For example, if the font size in the PSD is 14pt, what would be the equivalent 'px' font size to use? ...

htmlcsspsd

I'm puzzled by why my newly purchased website domain occasionally redirects me to the outdated webpage

My website was previously hosted with n*agahoster but we decided to switch to a government server and change the domain from example.com to example.gov.xx. The transition was smooth, as someone managed the server and I provided backup files (public_html an ...

phphtmlwebserverhosting

What steps can I take to align elements using justify-content-between?

I am trying to arrange two elements, one on the most right and the other on the most left side. I have attempted to use justify-content-between but it doesn't seem to be working and I'm not sure why. HTML <div class="post-left d-sm-flex ...

htmlcssbootstrap-4html-lists

Repeating Data in MYSQL Arrays

error_reporting(E_ALL); echo "<pre>"; // IMPLEMENTATION OF TEAM DISTRIBUTION IN CONTESTS $fixtures = mysqli_query($link, "SELECT teamname FROM tourn_teams WHERE groupname='Group 1'"); $teams = array(); // LIST OF TEAMS while($row = mysqli ...

phphtmlmysql

Is there a way to implement a rotation animation using jQuery?

Currently, I am using this CSS animation method: $(".left").animate({ left: '300px', width: '300px', height: '300px', top: '25px' }, 1000,'easeInOutQuint', function() { }); I attempted to ...

jquerycssanimation

My PHP code keeps prompting me with an "invalid password" message even though I am confident that the password is correct

As part of a project at work, I am creating an intentionally flawed application to showcase common security vulnerabilities. This application is designed to demonstrate improper practices and may even entice those looking to exploit it. We have robust logg ...

phphtmlsql-server

Removing whitespace from a Bootstrap carousel is a common task that can be easily accomplished with

What is causing the gap on my page when viewing it on a mobile device or different screen size? How can I eliminate this gap? All images have uniform height and width. ...

htmlwebbootstrap-4

Having trouble accessing an updated Bootstrap dropdown using AJAX jQuery while working with Flask

Hello, I am new to using jQuery and Flask and I am attempting to update my Dropdown Menu with an AJAX request. Here is how my dropdown looks: <div class="btn-group btn-group-toggle" data-toggle="buttons"> <div cla ...

pythonjqueryajaxflaskbootstrap-4

Disable the functionality of the next and previous buttons for the Bootstrap carousel when clicking on the outer

Here is the code for the carousel: The next/prev button functions under its respective div, how can I stop it? When I click on the div below the carousel, the carousel continues to move as usual. Below the carousel div, there is another one with a tabbi ...

javascriptjqueryhtmlcsstwitter-bootstrap

What is the best approach to styling a sub-child element within the first child using TailwindCSS?

Currently working with React (Next.js) and TailwindCSS. <ul> <li> <h1 className="bg-red-400">first</h1> </li> <li> <h1 className="bg-green-400">second</h1> </li> &l ...

cssreactjsnext.jstailwind-css

What is the reason for the position of div1 not being directly in the top right corner when its position is set to div2's top and left offset plus div2's width?

function handler(ev) { var target = $(ev.target); if( target.is(".item") ) { var brt = $(target).offset().top; var let = $(target).offset().left + $(".test").width(); $('#DivToShow').css({'top':brt,'left':let, 'd ...

javascriptjqueryhtmloffset

Maintain original pitch of HTML video content (preservesPitch, mozPreservesPitch, webkitPreservesPitch)

I am attempting to turn off the preservesPitch feature on a video element that is playing in slow motion by adjusting the video's playbackRate. In Chrome, video.webkitPreservesPitch is not defined, and changing it to false or true doesn't affect ...

javascripthtmlaudiohtml5-videopitch

I am in search of a regular expression to validate a Jordanian phone number, whether it includes the country code or not

Looking for a regex pattern that can validate phone numbers beginning with either 0096279, 0096278, 0096277, or 079, 078, 077. ...

javascripthtml

Learn how to dynamically incorporate multiple Bootstrap collapse elements in PHP

I've encountered an issue with my code that contains both HTML and PHP. The problem arises when there are multiple elements in a collapse, as only the first element works properly. This is due to the fact that each element has the same id named "colla ...

javascriptphpcsstwitter-bootstrap