Troubleshooting: Unable to get CSS selector to work with Bootstrap popover

I am facing an issue in my CSS file where I need to target the ul tag inside a popover. I attempted to do this by using the code .myClass ul {list-style: none;}, but unfortunately, it did not work as expected. When I tried using .popover ul {...}, it did work, however, I prefer having different styles for different classes. How can I specifically select the ul tag inside a bootstrap popover for a specific class? The code snippet for my popover is as follows:

<span class="myClass" data-html="true" data-toggle="popover" title="myTitle" data-content="<ul><li>This is a test</li></ul>">myPopover</span>

Is giving the ul tag a class the only way to achieve this?

htmlcssbootstrap-4

Answer №1

Would you find this solution suitable? Implement the general sibling selector with myClass.

$(function() {
  $('[data-toggle="popover"]').popover()
})
.myClass ~ .popover ul {
  list-style: none;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e5958a95958097cb8f96a5d4cbd4d3cbd5">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

<span class="myClass" data-html="true" data-toggle="popover" title="myTitle" data-content="<ul><li>This is a test</li></ul>">myPopover</span>

Answer №2

When using bootsrap 4, keep in mind that the popover div is not necessarily a child of the popover toggle. Instead, it is typically inserted into the DOM dynamically by JavaScript, often as a direct child of the "body" element. This can make it challenging to style the popover using the class added to the span element.

If you inspect the span element with your browser's dev tools, you may notice an additional attribute 

aria-describedby="{{popover-id}}"
appended to the element. By leveraging JavaScript, you should be able to retrieve this property using the class name and potentially transfer the styles from the class to the popover element using the unique id.

In summary, a simpler approach would involve adding a class directly to the ul tag.

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

How can I prevent CSS classes from being applied to the submit button in jQuery UI?

Currently, I am utilizing jQuery UI with a customized theme on my website. One issue I have encountered is related to an <input type="submit"> element present on the page. Due to jQuery being active, this button automatically inherits the jQuery UI a ...

cssjquery-uiclass

concealing all content with a hidden overflow

I'm currently working on a project and have this pen which is just a snippet of it. In this snippet, I am trying to hide a div when it gets transformed off to the left. The elements involved are .fixed-strip for hiding overflowed content and .strip as ...

css

Copy the CSS path from Firebug and paste it into the command line suggested

Currently, I am working on customizing the firebug plugin for Firefox. My goal is to enable a feature where when a user Inspects an element and clicks 'Copy CSS path', the CSS path will automatically be pasted onto the command line of the firebug ...

javascriptjquerycssfirebug

Is it a universal rule for embedded css to take precedence over external css?

In my previous studies, I had learned that embedded CSS always takes precedence over external CSS. However, I have discovered that the styles that come last in the code actually prevail. Consider the following code snippet where I have used color:green; i ...

htmlcss

Leveraging jQuery for dynamically populating <select> elements within an HTML document using JSON data

My goal is to populate my <select> element with country names from a JSON file using jQuery/ajax. <div id="navbar"> <label for="countrySelect">Select a country from the list:</label> <select id="count ...

htmljqueryjsonajaxcurl

Tips for retrieving nested data objects from a JSON API on the web

Below is the provided API link - I attempted to utilize this jQuery script in order to collect data for each state individually for my project. However, I am facing difficulties accessing the information with the code provided below. $.getJSON('http ...

javascriptjqueryhtmljsonapi

What is the best way to create curved text using HTML 5 Canvas?

Looking to create a canvas graphic similar to this flash animation: I have already drawn six arcs and now I need suggestions for writing six words within these arcs. Any creative ideas? ...

javascripthtmlcanvas

Adjusting the width of a <div> element based on window size changes

So I have this Vuejs application that has three divs using CSS grid: a sidebar, a config panel, and a preview. I want to dynamically set the width of the preview div in pixels based on the current screen size and when the screen is resized. To give a bett ...

javascripthtmlcssvue.jsvuejs2

The function of jQuery's .prop('defaultSelected') appears to be unreliable when used in Internet Explorer 9

Below is the code I am currently using: $selects = $('select'); $selects.val( $selects.prop('defaultSelected')); The purpose of this code is to reset the values of all select elements on my webpage. However, I am facing an issue in IE ...

javascriptjqueryhtmlbackbone.js

Floating elements within scrolling loading

I've been trying to figure out how to add a loading scroll feature to my webpage, but I'm running into issues with the div not displaying correctly. Instead of loading underneath the scroll, the content pops up on the side as shown here when scro ...

javascriptjquerycssajax

ways to display divs horizontally

Hello, I am trying to display these columns horizontally, but they are currently showing up vertically. How can I change this? Here is the blade file code snippet: <div class="col-lg-3 mb-4"> <!-- Input & Button Groups --> ...

htmllaravelbootstrap-4

Putting the second line of a list in a paragraph element with indentation (excluding UL or OL)

I am working with a table that has the following structure: html { width: 400px; } <table> <tr> <td>Description:</td> <td style="white-space: pre-wrap;"> Some text which could be quite long with some &apos ...

htmlcss

Activate the toggle menu

Hi there! I'm currently working on a menu and I want the clicked item to become active, switching the active state to another item when clicked. However, my current implementation is not working as expected. Any assistance would be greatly appreciated ...

javascriptjqueryhtmlcsstoggle

What could be causing the black spaces to appear after my text in HTML?

I recently tried to implement text on an image following a tutorial I found at https://css-tricks.com/text-blocks-over-image/. Here is the code snippet I used: .image{ position: relative; } h2{ position:absolute; top: 200px; left: 200px; wi ...

jqueryhtmlcssdebugging

Converting a webpage into UTF-8 format

Can you explain the concept of encoding a webpage to me? When someone mentions that a page is encoded in UTF-8 or another format like EUC-KR, what does that signify? Does it pertain to encoding done on the server-side or client-side? Is it related to th ...

javahtmlencodingutf-8character-encoding

What is the best approach to accessing the original data stored in a data-* attribute using jQuery?

It seems I may have overlooked something, as I've been utilizing the data-* attribute, specifically data-content, with entries like "apple", "cow", and so on. However, I encountered an issue when I set my data-content to the string "null" (upon inspec ...

javascriptjqueryhtmlattributes

The navigation for Rails 5.0/Jquery Mobile is no longer responsive after a single click on the designated button

I've been struggling with this issue for a while now without any luck. The mobile navigation seems to be functioning correctly, but only when I refresh the page on my phone. After clicking on a list item, the navigation button becomes unclickable. I m ...

jqueryhtmlmobile

Ensuring Angular2 Javascript is validating only numerical input and not accepting characters

Access the full project here (excluding nodes_modules): Note: After running the project, all actions related to this issue can be found in the "Edit All" section of the website. Click on that to view the table. The main objective of this website section ...

javascripthtmlangular

Issue with applying CSS properties of 'top' and 'left' to a dynamically created div using

After an extensive search on both the site and the internet, I have not had any luck so far. I am dealing with a series of dynamically-generated divs using JQuery, cloned from the original HTML source. While I can manipulate the positioning properties of ...

javascriptjquerycssdom

Troubleshooting jQuery's issue with dynamically adding input fields

I came across a tutorial (which I tweaked slightly) on this website: code In JSFiddle, everything works perfectly fine with the code. However, when I implemented it on my actual page, it's not functioning as expected. I've been trying to trouble ...

javascriptjqueryhtml