Problem with HTML content in Bootstrap 2.3.2 Popover

Seeking a way to dynamically populate a popover through

JAVASCRIPT

$("[data-bind='popover']").popover({
 trigger: 'hover',
 html: true,
 content: function(){ 
  return "<img src="+$(this).data('content')+" />";
 };
});

HTML

<a href="myreference.html" data-bind="popover" data-content="mylinktoimage">Brick</a>

An issue arises when trying to set the width and height attributes for the img element within the JavaScript. The popover fails to display properly in this scenario. However, if these attributes are not set, the anchor <a> experiences a "vibrating" pointer cursor, preventing the popover from appearing. What could be causing this problem?

jqueryhtmlcsstwitter-bootstraptwitter-bootstrap-2

Answer №1

Have you tested the code provided above to ensure its functionality? I encountered difficulty with the popover feature not working as expected.

..
return "<img src="+$(this).data('content')+" />;
 });

Could this be the root of the problem?

<a href="myreference.html" data-bind="popover" data-content="flower.jpg">Brick</a>

update, it also functions properly with external online images 

<a href="myreference.html" data-bind="popover" data-content="http://upload.wikimedia.org/wikipedia/commons/thumb/a/a5/Flower_poster_2.jpg/451px-Flower_poster_2.jpg">Brick</a>

Additionally,

$("[data-bind='popover']").popover({
   trigger: 'hover',
   html: true,
   content: function(){ 
      return '<img src="'+$(this).data('content')+'">';
   }
});

results in :

$("[data-bind='popover']").popover({
   trigger: 'hover',
   html: true,
   content: function(){ 
      return '<img src="'+$(this).data('content')+'" width="50">';
   }
});

generates

No issues observed, such as "vibrations."

Answer №2

It appears there is a missing quote before the semicolon in this code snippet:

return "<img src="+$(this).data('content')+" />";

Check out this working example on JSFiddle - http://jsfiddle.net/tEWLw/2/

Update: Here's another JSFiddle demonstrating the issue: http://jsfiddle.net/8DP4T/1/. I'm not exactly sure what else may be incorrect here :)

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

Display the contents of an HTML Object tag without relying on any external packages

Is there a way to print a PDF without opening it in a new tab? In my project, I have embedded a PDF using the HTML Object tag: <> <object id="documentObject" data={fileSrc} type={fileType} height="100%" width="100%" ...

javascripthtmlreactjstypescriptdom

Arranging Tabs in an Uneven Stack: jQuery and CSS

Looking to stack 5 tabs on mobile with the odd tab at the top instead of the bottom? Currently set to 50% width and floated left, but they fill up the top first. <div class="tab-row"> <button class="tab active">A</button> <button ...

jquerycsstabs

Selecting the first child within a table using the first-child

I recently set up a login portal page for three different websites. The layout consists of three separate login portals displayed neatly in two columns within a table named "loginPortals". I am currently working on styling the page using CSS, aiming to enh ...

htmlcsscss-selectors

How come the section of a web page covers the header when the header's position is set to fixed?

My attempt at fixing the position property of the header as fixed has not been successful. When I scroll down the page in mobile view, the section part of the webpage overlaps the header part. The home section in this code functions properly, but the About ...

htmlcssbootstrap-4responsive-design

Obtain saved browsing history in HTML5 with the use of JavaScript

I'm currently utilizing the History.js library found at https://github.com/browserstate/History.js/ to create an AJAX-based application that leverages the HTML5 History API for dynamically changing the URL and title of the browser. Does anyone have s ...

javascripthtml

Can a video be embedded within a popover element?

My goal is to insert a short video into my popover. I attempted the following method: let htmlString = ` <div class="embed-responsive embed-responsive-16by9"> <video class="embed-responsive-item" src="..." loop muted></video&g ...

javascripthtmltwitter-bootstrapbootstrap-4

Slider with Dual Images: A Visual Comparison

I'm currently working on a webpage that features before and after images using a slider based on mouse movement to display both pictures. I am trying to incorporate multiple sliders on the same page but have been facing difficulties in getting them to ...

javascriptjqueryhtmlcss

Tips for emptying form fields when sliding up in jQuery

I have created a user-friendly form for booking hotel accommodations. Users can easily select the number of adults and children from dropdown menus. Additionally, the form dynamically generates dropdowns for specifying the ages of children once selected. ...

phpjquery

Using JQuery to load elements and applying Select2 functionality

I'm currently utilizing select2 in a project, and it's functioning properly by initializing the select2 using: $(function() { $(".elegible").select2(); }); The problem arises when I attempt to apply the function to elements loaded through jQ ...

javascriptphpjqueryajaxselect

Using jQuery to retrieve a List<> from an ASP.NET WebService

This is my WebService Method: [WebMethod] [ScriptMethod(ResponseFormat = ResponseFormat.Json)] public string retrieveImages() { DBservices DBS = new DBservices(); List<string> ImageUrls = new List<string>(); try { DBS.g ...

c#jqueryasp.netajaxweb-services

The rendered content from Ajax is not being displayed properly within the PRE tag

I have a standard HTTP GET request using Ajax that returns a pre-formatted HTML string: '\u000a\u0009\u0009\u0009\u0009\u000a\u0009#07\/04\/2014#\u000a' My goal is to insert this value into a pr ...

javascripthtmlangularjsajaxpre

Trouble with stroke width in Svg bezier path while using a mask

I'm having trouble hiding part of a path using a mask. When I apply the mask, the stroke width doesn't seem to work anymore. Any suggestions on why this is happening and how to fix it? svg { position: absolute; width: 100%; height: 100%; ...

htmlcsssvg

What is the process for implementing a unique Angular theme across all components?

I created a unique Angular theme called 'my-theme.scss' and added it to the angular.json file. While it works with most Angular Elements, I am facing issues getting it to apply to certain HTML Elements inside Angular Components. For example: < ...

cssangularscss-mixinscustom-theme

Achieve multitasking efficiency by utilizing jQuery and Ajax to seamlessly run two background tasks at

Here's my updated query: I have developed a script that allows users to import large volumes of data. Once the form is submitted and the data is validated, I initiate two background tasks: one is a script responsible for importing all the data while ...

phpjqueryajaxprocessbackground-process

Use jQuery to dynamically assign a unique div id to a specific class element

<div class="leaflet-marker-icon"></div> <div class="leaflet-marker-icon"></div> <div class="leaflet-marker-icon"></div> <div class="leaflet-marker-icon"></div> The map generates these divs, all with the s ...

javascriptjquerycss

Fetch file using AJAX and add it to the existing content

Check out this testing page: 1) To begin Exercise I, click on the first button <a class="btn_quizTEST" data-exercisename="FL1E1.html">Start Exercise I </a> - observe the first file being loaded. 2) For Exercise II, click on the second bu ...

jqueryajaxappend

Issue with transmitting data from jQuery to PHP

I am trying to utilize Ajax to retrieve data from #f1 (.Val()) and display it using PHP (echo). The Ajax part works successfully, however, I am facing an issue in fetching the data in PHP. Every time it says "false". Below is the code snippet: (line 86~9 ...

phpjqueryajaxvariables

Automatically add a table row at the bottom displaying the overall calculation

I have data to display in an HTML table. The data is coming from a third-party server (PHP) using AJAX requests. The data is currently being displayed effectively with the following code: <table id="tbl-product"> <tr> < ...

jqueryhtmlajax

Navigating through integration challenges between Angular UI Calendar and Google Calendar v3 API

Currently, I am in the process of integrating the Angular UI Calendar into my project using the Google Calendar API. I have successfully implemented it with the v3 Calendar API using the jQuery plugin version through FullCalendar on its own. However, I am ...

jqueryangularjscalendargoogle-calendar-api

What are some effective ways to manage repetitive HTML elements like headers and footers in Angular 4?

Within my Angular web project, I find myself using a variety of different headers on multiple pages. Is there a way to streamline this process by coding the header and footer once and having them automatically included in one or more pages? I am looking ...

htmlasp.net-mvcangularrazor