Troubleshoot: Inline Styling Problem with Bootstrap 4 Popover

Is there a way to dynamically change the color of the Bootstrap 4 popover title using inline HTML style attributes? It seems that the plugin is removing them without any logical reason. Below is an example demonstrating this issue:

$('#test').click(function(e){
     $(this).popover({
        trigger: 'manual',
        container: 'body', 
        html: true,  
        title: '<span style="color:red">my title</span>',                                                  content: '<span style="color:blue">my content</span>',        
    });   
  
  $(this).popover('show');
 });
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<button id="test" type="button">Click Me</button>

Does anyone have a solution for this issue? Thanks in advance.

javascripthtmlcssbootstrap-4

Answer №1

When using the Popover feature, you have the option to specify a whitelist that includes allowed attributes and tags.

The initial setting for the whiteList can be found here.

If you want to add new values to the default whiteList, you can do so by following this example:

$.fn.tooltip.Constructor.Default.whiteList['*'].push('style')

After making this adjustment, your inline styles should be functional.

Answer №2

Revise the template to customize with your own classes for easier styling using external CSS:

$('#test').click(function(e){
     $(this).popover({
        trigger: 'manual',
        container: 'body', 
        html: true,  
        title: 'my title', 
        content: 'my content',
        template:'<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header custom-red"></h3><div class="popover-body custom-blue" ></div></div>'
    });   
  
  $(this).popover('show');
 });
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
.custom-red {
  color:red;
}
 custom-blue {
 color:blue;
}
</style>
<button id="test" type="button">Click Me</button>

If you are unsure about the colors to use, you can dynamically insert the style element via jQuery.

$('#test').click(function(e){
     var r1 = Math.floor(Math.random()*200);
     var r2 = Math.floor(Math.random()*200);
     var c1 = '#00ff00';
     var c2 = '#ffff00';

     $(this).popover({
        trigger: 'manual',
        container: 'body', 
        html: true,  
        title: 'my title', 
        content: 'my content',
        template:'<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header c'+r1+'"></h3><div class="popover-body c'+r2+'" ></div></div>'
    });   
    $('head').append('<style>.c'+r1+' {color:'+c1+';}.popover-body.c'+r2+' {color:'+c2+';}</style>')
  
  $(this).popover('show');
 });
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<button id="test" type="button">Click Me</button>

Answer №3

To style popovers in Bootstrap, inline styles are not supported and will be removed automatically. Instead, you can create CSS classes to customize the appearance of your popovers as demonstrated below:

$('#test').click(function(e){
     $(this).popover({
        trigger: 'manual',
        container: 'body', 
        html: true,  
        title: '<span class="redPopover">my title</strong>',                                                 
        content: '<span class="bluePopover">my content</span>',        
    });   

  $(this).popover('show');
 });
.redPopover{
  color: red;
}
.bluePopover{
  color: blue;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<button id="test" type="button">Click Me</button>

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

Error parsing XML: Missing opening tag

function fetchUserDetails() { $url = "http://steamcommunity.com/profiles/{$this->steamID64}/?xml=1"; $xmlData = simplexml_load_string($url); if(!empty($xmlData->error)) { return NULL; } $this->displayName = (string) $xmlData-&g ...

phphtmlxmlsteam

CSS Tutorial: Creating a Dynamic Gradient Bar

I am looking to create a dynamic colored bar with a moving color gradient effect. Without using JavaScript, I want to achieve this effect using CSS 3 properties such as gradients and animations. This is a snippet of what I have tried so far: HTML: <b ...

htmlcss

Incorporate Bootstrap rows within the Wordpress post loop for enhanced design

I have 4 bootstrap columns with unique styling for each. I am looking for a way to dynamically insert and close <div class="row"> around these columns based on the number of results returned. If there is only 1 result, the row should only s ...

wordpressloopsbootstrap-4

Firebase version 9 - Retrieve the content of a referenced document

I'm having trouble locating the documentation I need. Within my Firebase Firestore project, there is a collection called users. Within users, there are three collections: companies, policies, and stores. In the policies collection, I have fields for ...

javascriptreactjsfirebasegoogle-cloud-firestore

Ways to ensure that an HTML form remains filled out even after completing the field, but prior to hitting submit

Scenario: I have found that filling out a form on paper with a pen helps individuals focus more on what they are writing. I am curious if there is a method to replicate this in an HTML form. Desired Interaction: I envision a scenario where a person select ...

javascriptpythonhtmldjangoforms

Looping through ViewData strings and populating a form with their values

I am currently utilizing ASP.NET and MVC to work on a project where I need to take a list of strings and populate a form with them. The goal is for users to import account numbers, have the form prefilled with these numbers, and then submit the data. I&apo ...

javascripthtmlasp.net-mvcrazorviewbag

Test your knowledge of Javascript with this innerHtml quiz and see

How can I display the output of a score from a three button radio button quiz without using an alert popup? I want the output to be displayed within a modal for a cleaner look. I tried using InnerHTML but now there is no output when the button is clicked. ...

javascriptjqueryhtml

When adjusting the top margin of the main content in CSS, the fixed top navigation section's margin also decreases simultaneously with the main content

I am in the process of creating a basic static blog page using HTML5, SASS, and CSS. While working on the design, I utilized the 'nav' semantic element for a fixed top bar on the page that remains visible even when scrolling down. Additionally, ...

csshtml

How can I create a custom checkbox in React Bootstrap without specifying an ID

I'm struggling to understand why this seemingly straightforward Bootstrap custom checkbox isn't functioning as expected. My project involves React, Bootstrap, and React-Bootstrap. import React from "react"; import ReactDOM from "react-dom"; impo ...

javascriptreactjscheckboxbootstrap-4

Listener for 'timeupdate' event on video doesn't retain values

My html5 video event listener is designed to pause the video at a specific time while the user participates in a quiz. The first 'lesson' works fine, and the second video also appears to add the listener with the correct pause time. However, when ...

javascriptangularjshtml5-videodom-events

Make multiple images in one row resize proportionally instead of wrapping them to the next line

My phone's screen is small and I want the three images to remain in the same row. In case they don't fit, they should shrink proportionately to maintain alignment (refer to image at the bottom). Consider the code snippet below: <div id="exam ...

htmlcssimage-resizingautoresizeshrink

Problem detected in id modification

My JavaScript function is triggered with an onChange event, which works fine when there's only one. <input class="form-control" type="text" onchange="opert(<?php echo $fetch["id_prod"] ?>,1)" id="name" value="<?php echo $fetch["name_prod" ...

javascriptarrays

Tips for showcasing information from a composable to a Vue.js component

Having an issue with Vuejs 3 composables where I am trying to create a single composable for three inputs - email type and text type. I'm unable to display the email typed in the button component template even though I have imported the composable hoo ...

javascriptvue.jsvuejs3composable

Utilizing Express 4, create a fresh route within an app.use middleware

I'm currently working on an express nodejs app where I am attempting to implement "dynamic routes" within another route. Here is what I have: .... app.use('/test/:id', function(req,res,next) { app.use('/foo', sta ...

javascriptnode.jsexpress

What method does jqGrid use to dynamically update the selection options list based on the status data?

Currently, I am utilizing jQgrid for displaying a list with data retrieved through Ajax. The list is displaying properly without any issues. However, my challenge lies in dynamically populating the list of options based on the status value received. Area ...

javascriptjavamysqlwebjqgrid

The markers within a loop in react-native-maps are failing to render

Recently, I've been delving into the world of React Native app development for iOS. Specifically, I've been experimenting with the react-native-maps package. Here's the issue I'm facing: When I statically render a single MapView.Marker, ...

javascriptiosreactjsreact-nativemaps

Is it possible to utilize the YouTube Data API without specifying a redirect_uri? If so, how would one go

After developing a NodeJS application for uploading videos to a YouTube channel via the command line interface, I encountered a challenge. Every upload redirects me to a specific redirect_uri as per Google Docs requirements. To bypass user authorization/s ...

javascriptgoogle-apiyoutube-data-api

Arrange objects to have identical beginning points

Here is how my html code is structured: <div class="text-center"> (bootstrap class) <p>Username</p> <p>Name:</p> <p>Last name:</p> <p>Email:</p> </div> Link to jsfiddle I am attempting ...

cssbootstrap-4

What causes the error of inputRef.current being null in CurrencyTextField?

When attempting to target the second 'CurrentTextField' after changing the value of the first 'CurrentTextField', an error occurs stating 'inputRef.current is null'. import React, {useRef } from 'react'; import Curr ...

javascriptreactjsinputfocus

The Bootstrap modal's submit button refuses to be clicked

I have a unique challenge on my hands - dynamically loading a table within my page where each row is editable in a Bootstrap modal and deletable using multiple checked checkboxes through ajax. Everything works smoothly at first, with the submit button insi ...

phpjqueryhtmlajaxtwitter-bootstrap-3