Incorporating dynamic HTML content into a Bootstrap 2.3.2 popover

I'm trying to create a dynamic Bootstrap popover with HTML content when hovering over a button. Here's what I have so far:

$(".btn.btn-navbar").hover(function() {
  html = '<ul class="nav"><li><a href="#">hello</li><li><a href="#">hello2</li></ul>';
  $link = $('<a href="myreference.html" class="p1" data-html="true" data-bind="popover"' 
          + ' data-content="' + html + '">');

  console.log('$link', $link);
  $(this).html($link);

  // Open the popover
  $link = $(this).find('a');
  $link.popover("show");
}, function() {
  console.log('$hi there ');
});

jsfiddle

I'm struggling to display the HTML content properly in the popover. Can anyone help me with this?

javascriptjqueryhtmlcsstwitter-bootstrap

Answer №1

If you are unsure whether you need to generate a dynamic link with a popover or simply create a popover with HTML content only, I have provided a solution in this jsFiddle demonstration.

function generatePopoverWithHover(htmlContent, element, position) {
element.popover({
    html: true,
    placement: position,
    trigger: "hover",
    content: htmlContent,
    selector: true
}); }

Answer №2

The main issue you are facing lies within the code snippet 

' data-content="' + html + '">'

To understand what is happening, you need to handle the concatenation on your own.
The expected outcome would be:

<a href="myreference.html" class="p1" data-html="true" data-bind="popover" data-content="<ul class="nav"><li><a href="#">hola</li><li><a href="#">hola2</li></ul>">

The issue arises in this segment:

data-content="<ul class="nav"><li>

Here, the data-content attribute will only capture <ul class=, causing the <a> tag to prematurely close at 

data-content="<ul class="nav">

To correctly incorporate the html content into data-content, follow this approach:

html = '<ul class="nav"><li><a href="#">hola</li><li><a href="#">hola2</li></ul>';
$link = $('<a href="myreference.html" class="p1" data-html="true" data-bind="popover">');
$link.data('content', html);

Answer №3

The issue lies in the string concatenation process. It would be better to create the HTML element like this:

html = '<ul class="nav"><li><a href="#">hello</li><li><a href="#">hello2</li></ul>';
$link = $('<a />', {
    href: 'myreference.html',
    "data-html": 'true',
    "data-bind": 'popover',
    "data-content": html
});

Check out the demo here: Fiddle

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

Best practices for refreshing FullCalendar v4 after updating the events object using AJAX calls

Utilizing fullcalendar V4 to display events. The events load normally, but I am in need of adding a filter using multiple checkboxes and refreshing the fullcalendar events after a checkbox is changed with AJAX. After the change, I receive the new object e ...

javascriptjqueryajaxfullcalendarfullcalendar-4

Experience the thrill of receiving a triumphant notification upon submission of your form

I'm currently learning about jquery and how to use it with ajax to insert and display data in a mysql table. I've been trying out some code that inserts and displays records from a mysql database. Right now, my goal is to make the success message ...

phpjqueryajaxformsmysqli

How can I dynamically change a key in an object and replace it with a custom name while also updating its value?

Transform this =>>>>> {1: "Baroque", 2: "Glitch Pop ", 3: "Nu Jazz", 4: "Drumfunk", 5: "Bitpop", 6: "Latin Pop", 7: "Carnatic"} into this ==>>>> [{id: 1 name ...

javascriptarraysjsonreactjs

Tips for effectively handling requestAnimationFrame

I created a unique function that both scrambles and translates text. The functionality is smooth if you patiently wait for the animation to finish before moving the mouse over to other elements. However, if you try to rush through to the next one, the prev ...

javascriptarraysanimationaddeventlistenerrequestanimationframe

Hide HTML div on click

Why does the button disappear when I click on it, but the status refreshes? Javascript $( ".refreshstatus" ).click(function(){ $( ".navplayers" ).load('stats.php'); }); CSS .refreshstatus{ font-family:'Noto Sans'; font-w ...

javascriptjqueryhtmlcss

Ways to retrieve the context of a function caller?

I'm exploring the concept of JavaScript scopes and am curious about a specific scenario: // B has access to 'context' var x = function (context) { y = function () { console.log(context); }; y(); }; x('cool'); ...

javascriptnode.js

Create a custom URL based on the text provided

I have a task of creating a new URL based on user input text Name: <input type="text" id="myText" > <button onclick="myFunction()">check tracking</button> When using DHL service, it requires adding a specific code to the URL like this: ...

javascript

Transform CSS filters into SVG filters

Implementing CSS filters on the <img /> elements has been successful for me. For example: filter: brightness(1) contrast(67%) saturate(250%) grayscale(0%) invert(0%) hue-rotate(330deg) sepia(40%) blur(0px); Now, I am trying to apply the same filte ...

htmlcsssvgsvg-filterscss-filters

Encountering an 'Unknown provider' error while running a unit test with AngularJS and Jasmine

I am facing an issue while writing a unit test for a controller in my application. Jasmine is showing an 'Unknown provider' error related to a provider I created for fetching template URLs. This provider is injected into a config function that is ...

javascriptangularjsunit-testingjasminekarma-runner

Moving list elements by dragging and dropping them within table cells using jQuery

I'm currently working on a project that requires the functionality of dragging and dropping list items between table cells. This means allowing users to drag an item from one cell and drop it into another, with the new location being saved. Does anyon ...

jquerydrag-and-drop

Having issues with Angular when dealing with loading a div through the jQuery load function

I am facing an issue with my master page that includes a script for angularJs and a div serving as a parent div to load an html page developed using Angular. MainPage.aspx <script src="../../Scripts/angular.min.js" type="text/javascript"></scrip ...

jqueryajaxangularjs

Utilizing Rails' JSON response with Ember.js

This is a sample serializer class TestSerializer < ActiveModel::Serializer attributes :post def post @post = user.joins(:post).select("user.name as name,post.content as content").where("user_id = ?",object.id) end end I'm try ...

javascriptruby-on-railsember.js

Blank datepicker displays as NaN when no selection is made

I've customized the bootstrap datepicker in a form by adding input fields, and everything is functioning correctly. However, the issue arises when the default date is displayed and if no date is selected, the month field shows 'NaN'. Is th ...

javascripthtmljquery

How can I programmatically click on a <td> element in VBA that has both an id and name attribute set (it's a search button)?

I'm attempting to automate the clicking of a button using VBA. When inspecting the element, I found the following code snippet: </td> <input name="btnSearch" id="btnSearch" style="width: 150 ...

htmlexcelvbaweb-scraping

The useReducer function dispatch is being called twice

I can't figure out the reason behind this issue. It seems that when strict mode is enabled in React, the deleteItem function is being executed twice. This results in the deletion of two items instead of just one - one on the first round and another on ...

javascriptreactjsreact-hooks

Tracking the frequency of text values that have been clicked on

Feeling uncertain about the best direction to take. In a table of unknown length, the first column consists of clickable links, while the second column contains corresponding text. The number of rows in this table is variable and depends on search resul ...

javascriptjquerymultidimensional-arraysession-storage

The function JSON.stringify() lacks support for handling large sets of records

I am facing an issue with passing a large array collection of over 100,000 records through a webAPI using JSON. The server is returning a 500 error when I try to do so. However, when I pass only a few hundred records, it works fine. Is there an alternativ ...

c#jqueryjsonapi

Retrieving user input in Angular and showcasing extracted keywords

I want to give users the flexibility to customize the format of an address according to their preference. To achieve this, there will be a text input where users can enter both keywords and regular text. The goal is to detect when a keyword is entere ...

javascriptangularjsregex

The navigation bar extends beyond the page's width

Currently, I am working on a website that was started by a former colleague. One issue I have noticed is that when the browser window's resolution reaches 768px or lower, the navigation transforms into a drop-down menu that appears wider than the page ...

jqueryhtmlcssnavbarnav

Tips on incorporating a past random selection into an RPG lifepath generator's current random selection process

Currently, I am in the process of creating a JavaScript version of a basic "life path generator" commonly seen in pen and paper RPGs. The generators I have been working on are inspired by the structure provided at this link: However, I am encountering dif ...

javascriptarraysif-statementrandom