Display a Bootstrap Popover upon hovering over an alert message

I have created a custom notification window using the bootstrap alert class. The string has been trimmed for display, but I want the full message to appear in a popover when the user hovers over it. Below is the code snippet used for displaying notifications:

<div class="alert alert-success fade in">
<a style="padding: 0px" href="#" class="close" data-dismiss="alert" onclick="makeArchive(${notifications.notificationId})">&times;</a>
<strong style="cursor: pointer;" data-container="body" data-toggle="usersMobile" data-placement="right" data-trigger="hover" data-animation="true" onmouseover="showPopover(${notifications.notificationText})" data-content="${notifications.notificationText}" onclick="openModal(${notifications.notificationId})">
<c:out value="${notifications.trimmedString}"></c:out>
</strong>

When hovering over, the popOver function is called:

function popOver(notificationId){
    $('[data-toggle="'+notificationId+'"]').popover("show");
}

Unfortunately, the popover is not appearing as expected.

Thank you.

javascriptjquerycsstwitter-bootstrapjsp

Answer №1

If you want to show the popover, make sure to first initialize it. Check out this demo link for your reference.

http://example.com/popover-demo

$('[data-toggle="usersDesktop"]').popover({html : true});

Best regards

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

Using JQuery and CSS to Transform Your Website Content

Imagine a scenario where I have two forms. Once the user completes the first form, they can click continue to proceed to the second form. Currently, I am using fadein and fadeout effects to show both forms on a single page. However, I want to switch to a ...

jqueryhtmlcssjquery-plugins

Swap the hyperlink and heading upon clicking

I need to implement a function where a sort bar changes URLs and titles on click. For example, when a link like this is clicked: <a href="http://localhost/11/affiliate/?post_type=affiliate&orderby=title&order=asc ">Title ASC</a> It sh ...

javascriptjqueryhtml

Leverage Vue.js to utilize dropdown selected data

I need help with populating additional form elements based on the selection of a record from a dropdown menu that contains response data obtained through an axios request. <multiselect v-model="order.orderJCname" id="orderJCname" name="orderJCname" :op ...

javascriptvue.jsvuejs2

While attempting to encrypt a private key in JavaScript using dotenv, I encountered an issue: TypeError - I was unable to read properties of undefined, specifically 'toHexString'

Welcome to encrypt.js const ethers = require("ethers"); const fs = require("fs-extra"); require("dotenv").config(); async function main() { const wallet = new ethers.Wallet(process.env.RRIVATE_KEY); const encryptedJsonKey ...

javascriptdotenv

What is the best way for an object to recognize if its value matches a key in another object, and then retrieve that value

Is there a way to make an object detect if its value is equal to another object's key and then retrieve it? Let's consider the following object named: AnswerString let AnswerString ={ 0: "B", 1: "x" } and the answers are in different objects, ...

javascriptarraysobject

css rules are not applied if the element is dynamically added using javascript

I'm encountering an issue with my code that inserts icons into a div with the ID of "editor". When I try to add a <select> element to the div with the ID of "drug_tool", the CSS styling rules for it are being ignored. How can I resolve this prob ...

javascriptjqueryhtmlcss

The CSS computed property indicates that text-align: center is being used, but the final result in the HTML output is not

https://i.sstatic.net/UfQ4z.png This problem has me stumped. The text-align css property of p.dropify-infos-message that I explicitly defined seems to be conflicting with the form p. Even though the computed css shows a strikethrough on the form p css pr ...

csstext-align

Invoking a PHP class through an AJAX response handler code

I'm attempting to access a PHP-File using AJAX. When I use a basic PHP-File like this: <?php header('Content-Type: text/html; charset=utf-8'); header('Cache-Control: must-revalidate, pre-check=0, no-store, no-cache, max-age=0, pos ...

javascriptphpjqueryajaxclass

Steps to update the value of an object stored within an array

I have a collection of items stored in an array. Each item is represented by an object with properties. I want to update the value of a specific property within each object: var array=[{a:1, b:false}, {a:2, b:true}, {a:3, b:false}] My goal is to set the p ...

javascriptarraysreactjs

AFRAME event listener for "raycaster-intersected" capturing

I am trying to capture the event raycaster-intersected every time it happens. To handle collisions, I need to know the distance to the first entity detected, but the event only triggers the first time the raycaster hits an entity. If the raycaster contin ...

javascripteventsthree.jsaframe

What is causing Ajax to fail in connecting to the server?

When trying to submit a simple ajax form and send a response to my server, I keep getting the following error message : Forbidden (CSRF token missing or incorrect.): /designer/addOne/ [31/Jul/2017 12:49:12] "POST /designer/addOne/ HTTP/1.1" 403 2502 Alt ...

jqueryhtmlajax

Is there a way to eliminate the header and footer from a Flutter WebView?

Here is the code snippet I tried to implement: I found a video tutorial by Joannes Mike on YouTube demonstrating how to remove the header and footer in Flutter WebView. However, it seems that Flutter has updated their library and the functions no longer w ...

javascriptflutterflutterwebviewpluginwebview-flutter

"Utilizing jQuery, Ajax, and the powerful REDIRECT_QUERY_STRING feature

Recently, I decided to revamp a small website consisting of three or four pages using a minimalist MVC framework (which might be excessive, but I wanted to experiment). The site is configured with an .htaccess file: RewriteEngine on RewriteCond %{REQUE ...

phpjqueryajaxquery-string

Bootstrap justify-content-around is not evenly distributing items

I am attempting to evenly distribute three rows of four bootstrap cards across a jumbotron with space-around, but it is not displaying correctly. I suspect there may be a margin interference issue that is included with Bootstrap. Here is the code I am usin ...

htmlcssbootstrap-4

Pan motion gesture above HTML components

Is it possible to create a hovering effect over elements in a container using a pan gesture? https://i.sstatic.net/E6G56.gif Here's the HTML code: <div class="container"> <div class="item"></div> <div class="item"></div ...

javascripthtmlgesturehammer.jspan

Replacing one <div> with another <div> using a clickable link within the divs

In one of my web pages, there is a div that I'll refer to as div1. Within this div, there is a link called 'Link1'. My goal is to click on Link1, triggering the replacement of div1 with div2. Inside div2 there will be another link, let&apos ...

javascripthtmlcssangularjs

Issue with URL parameter in React when using React Router

Initially, everything was running smoothly in my React project using react-router-dom. However, once I added another Route like so: <Route path="/edit/:id" component={EditPage}/> and tried changing the URL in the browser to http://localhos ...

javascriptreactjsreact-router

Leveraging mongoose populate in a Node.js environment with TypeScript

I am struggling to solve this issue. I am currently working on a node express mongoose server with code written in TypeScript and encountering the following error: Property 'populate' does not exist on type 'Document | Aggregate | Model | ...

javascriptnode.jsmongodbtypescriptmongoose

Angular version 7.2.1 encounters an ES6 class ReferenceError when attempting to access 'X' before it has been initialized

I have encountered an issue with my TypeScript class: export class Vehicule extends TrackableEntity { vehiculeId: number; constructor() { super(); return super.proxify(this); } } The target for my TypeScript in tsconfig.json is set to es6: ...

javascriptangulartypescriptwebpackes6-class

Can we create a process that automatically transforms any integer field into a hashed string?

Is there a non-hacky way to hash all IDs before returning to the user? I have explored the documentation extensively but haven't found a solution that covers all scenarios. I am working with Postgres and Prisma ORM, managing multiple models with rela ...

javascriptpostgresqlexpresshashprisma