Having trouble with popovers after upgrading to bootstrap v4

I am facing an issue while trying to migrate Bootstrap from version 3 to 4. The problem specifically lies with popovers and the popper.js library. Each time I hover over an element, the following error is displayed:

Uncaught TypeError: Cannot read property 'indexOf' of undefined

at v (computeAutoPlacement.js:24) at Object.onLoad (applyStyle.js:57) at index.js:69 at Array.forEach () at new t (index.js:67) at i.t.show (tooltip.js:286) at HTMLSpanElement. (popover.js:166) at Function.each (jquery.min.js:2) at r.fn.init.each (jquery.min.js:2) at r.fn.init.i._jQueryInterface [as popover] (popover.js:149)

https://i.sstatic.net/7kOBI.jpg

The libraries I am using are:

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>

And I am using Angular 1.6

This is how the element is structured:

<span class="tip-icon m-r-0" data-toggle="popover" data-content{{item.info}}" ng-if="item.info">Tooltip</span>

And this is how it is configured in the controller:

$('[data-toggle="popover"]').popover({
    trigger: 'hover',
    animation: false,
    html: true
});

Reverting back to Bootstrap 2.3.2 resolves the issue.

Any insights on what might be causing this problem? Appreciate your help!

javascriptangularjstwitter-bootstrapbootstrap-4popover

Answer №1

I encountered a similar issue and managed to come up with a solution. Here is the code snippet for my custom popover directive:

angular
.module('app.ui.popover', [])
.directive('bsPopover', function () {
    return {
        restrict: 'E',
        replace: true,
        template: '<span class="a-info" ng-bind-html="label"></span>',
        link: function (scope, element, attrs) {
            var el = $(element);
            el.popover({
                container: 'body',
                trigger: attrs.trigger || 'hover',
                html: true,
                animation: false,
                content: attrs.content,
                placement: attrs.placement || 'auto top'
            });
        }
    };
});

After some experimentation, I decided to change the default placement from 'auto top' to just 'top', and it seems to be working fine now :)

It appears that you can now only specify one of the following options: 

auto | top | bottom | left | right
.

Let me know if this solution works for you :)

Answer №2

The solution that worked for me may vary from the accepted answer. When encountering an issue related to 'angular', I decided to tackle it in the context of Rails. In my scenario, I included the statement "gem 'tether-rails'" in my Gemfile, ran "bundle install", ensured that I had imported popper and tether ("//= require tether", etc.) before bootstrap in my application.js file, and finally, restarted the server to see everything functioning properly once more.

Answer №3

When I encountered this issue, I found that by removing the placement: "" parameter from the popover() function, the problem was resolved.

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

utilizing Nuxt code in Elixir/Phoenix

Overview In my previous work, I combined frontend development with nuxt and backend support from elixir/phoenix, along with nginx for reverse proxy. Looking to enhance the performance of the system, my goal is now to migrate everything to Elixir/Phoenix. ...

javascriptelixirphoenix-frameworknuxt.js

A Node.js function may not provide a response immediately due to a pending request

Here is a simple upload method using node.js and express.js: upload: function(req, res, next){ // Loop through each uploaded file async.each(req.files.upload, function(file, cb) { async.auto({ // Create new path and unique file ...

javascriptnode.jsexpress

Display only the selected index and conceal the rest

I am facing an issue where I have added a label and input in ng-repeat. The functionality works fine when the user clicks edit to show the input and hide the label. However, the problem arises when the user clicks on the new button as it displays the new i ...

javascriptjqueryhtmlangularjs

Tips for ensuring an element is visible in CUCUMBER JS?

Whenever I run my code, it keeps returning the error message: NoSuchElementError: no such element: Unable to locate element Even though I have set up a wait function, it does not seem to actually wait. The step fails immediately without waiting for the s ...

javascriptselenium-webdrivercucumber

Creating a sticky popup feature for your Chrome extension

Just starting out with chrome extensions and looking to create one that appends an external class to a selected tag. For example, let's say we have the following tag: <h1>extension</h1> When the user clicks on this element, I want to ad ...

javascriptjqueryhtmlcssgoogle-chrome-extension

Steps for inserting new rows into a table from text fields1. Begin

As someone who is brand new to jquery/html, I am eager to create a diary specifically for logging my long distance running times in a neat table format. Here's the HTML code I have been working on: <head> <title>Running Diary</titl ...

javascriptjquery

Tips for uploading files to C# MVC model with the angular file uploader

One of the elements on my webpage is a basic chat client that I developed. Within this chat client, there are topics, messages within those topics, and the messages can also include files. The structure is organized as follows: List of Topics -> Each T ...

c#asp.netangularjsasp.net-mvcangularjs-ng-model

Instructions on how to delete a specific tag from a table using its ID

I have a complex HTML table generated by a PHP loop with multiple rows. My goal is to eliminate all the a tags within the td tag where the ID of the td tag is equal to 1 or another specified value. <table> <tr> <td>ID: 1</ ...

javascriptjqueryhtml

Arrange the items in a list in JavaScript in descending sequence

How to sort a list of records in JavaScript in descending order? var number; //dynamic number retrieved from API var test; //dynamic text retrieved from API for (var i; i <= accList.length; i++) { var odlist = 'you have :' + test + number ...

javascriptjquerysortingfor-looparraylist

What are the options for app directory routing and programmatic navigation in the upcoming 13 application

I am currently working on a project called Next 13 that involves using the app directory and MUI 5. The project's structure is organized as follows: ./src ./src/app ./src/app/dc ./src/app/dc/admin ./src/app/dc/admin/dc_types.jsx However, when I try t ...

javascriptnext.jsmaterial-ui

Discover a method to receive an alert when the mouse exits the inner window along the y-axis

Is there a way to receive an alert if the mouse moves out of the inner window solely in the y-axis? Currently, alerts are triggered when the mouse moves out on both x-axis and y-axis. For example, if the mouse pointer hovers over the address bar coming fro ...

javascriptjquery

Encountering a "file or directory not found" error during the installation of ply using

I recently stumbled upon an interesting project for testing Rest APIs. I was in the process of installing ply from https://github.com/ply-ct/ply npm install ply-ct --save-dev Encountered this error, wondering if anyone has a solution npm WARN saveError EN ...

javascriptnode.jsweb-servicesnpmautomated-tests

Exploring the Time Interval Between Sending GET and POST Requests in Node.js and Express

I'm currently in the process of creating a quiz platform with Node/Express. Is there a way to guarantee that users complete the quiz within a specific timeframe without utilizing client-side javascript? For example, if the quiz is set for 10 minutes, ...

javascriptnode.jsexpressmiddleware

`Some Items Missing from Responsive Navigation Menu`

Hey there! I'm currently diving into the world of responsive design and I'm attempting to create a navigation bar that transforms into a menu when viewed on a mobile device or phone. Everything seems to be working fine, except that not all the na ...

javascripthtmlcssresponsive-design

updating a d3js line graph in real-time using JSON information

Trying to wrap my head around dynamically updating a line graph with new data, shifting the graph to the left and adding fresh data from the right - you following me? Want it to behave just like the examples on I'm fairly new to d3 (javascript) and l ...

javascriptjsond3.jsdynamiclinegraph

Determining if a map array value is being duplicated with a distinct key in JavaScript

I am facing an issue with a Map that has "String" as keys and "Array" as values. My problem is figuring out how to check if an array item is present in a different "Array" value, specifically in the "Array" of a different key within the map. For example: ...

javascriptarrayscollectionshashmapiterator

An efficient method for removing a column using JavaScript

Hello, I'm seeking assistance with the following code snippet: $(document).on('click', 'button[id=delete_column]', function () { if (col_number > 1) { $('#column' + col_number).remove(); $('#col ...

javascriptjquery

The parameter did not successfully transfer to the internal function within Firebase Cloud Functions

I am currently working on a Firebase cloud function that looks like this: exports.foo = functions.database .ref("/candidates/{jobTrack}/{candidateId}") .onCreate((snap, context) => { const candidate = snap.val().candidate; const jobTrack = ...

javascriptnode.jsfirebasefirebase-realtime-databasegoogle-cloud-functions

Utilizing jQuery in Wordpress to Toggle Content Visibility

Currently, my website pulls the 12 most recent posts from a specific category and displays them as links with the post thumbnail image as the link image. To see an example in action, visit What I am aiming to achieve is to enhance the functionality of my ...

javascriptjqueryhtmlcsswordpress

Use JavaScript to swap out various HTML content in order to translate the page

I am currently facing a challenge with my multilingual WordPress website that utilizes ACF-Field. Unfortunately, WPML is not able to translate the field at the moment (2nd-level-support is looking into it). As a solution, I have been considering using Java ...

javascriptphphtmlwordpressadvanced-custom-fields