Incorporating style='' within a bootstrap tooltip

Here is the HTML code that I am currently using:

<a href="#" title="" data-toggle="tooltip" data-html="true" data-original-title="1 bookmark<br/>Category: <span style=&quot;color: #FF9AA2&quot;>Red</span>" aria-describedby="tooltip92967">My Tooltip Demo</a>

The bootstrap tooltip is functioning correctly, but the color of the span element is not changing to red as expected. How can I apply styling to the span so that the color displays correctly inside the tool tip? Currently, all text appears in the default white color of the bootstrap tooltips.

htmlcssbootstrap-4

Answer №1

If you're looking to customize the color of a tooltip, one approach is to include the color as a data attribute in the link element.

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

$('[data-toggle="tooltip"]').on('inserted.bs.tooltip', function () {
  var c = $(this).data("color");
  $('.tooltip span').css('color',c);
})
a {
 margin:50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js" integrity="sha384-6khuMg9gaYr5AxOqhkVIODVIvm9ynTT5J4V1cfthmT+emCG6yVmEZsRHdxlotUnm" crossorigin="anonymous"></script>

<a href="#" title="" data-toggle="tooltip" data-html="true" data-original-title="1 bookmark<br/>Category: <span >Red</span>" data-color='#FF9AA2' aria-describedby="tooltip92967">My Tooltip Demo</a>

<a href="#" title="" data-toggle="tooltip" data-html="true" data-original-title="1 bookmark<br/>Category: <span >green</span>" data-color='#00FF22' aria-describedby="tooltip92967">another Tooltip Demo</a>

For more information, you can visit https://getbootstrap.com/docs/4.4/components/tooltips/#events

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

Launching an HTML document with checkboxes already selected

I am attempting to load my HTML page with checkboxes already checked if they were selected on the previous page. The code I currently have is shown below: {% if job.activism %} checkbox logic goes here {% endif %} <br><input type="checkbox ...

javascriptpythonhtmldjango

What is the best method for creating thumbnail URLs for video files in HTML with JavaScript?

I am facing an issue with generating a thumburl for uploaded video files. After dynamically creating an input file and uploading local video files, I am able to retrieve the name and size of the file along with other information as shown in the screenshot ...

javascripthtml

Create a form using Node.js

Currently, I am facing an issue while attempting to post data from a form in node JS and then view the data in console. Upon clicking the submit button, the data appears in the console as expected. However, the website continues to load indefinitely with t ...

javascripthtmlnode.jsejs

Accessing mp3 files from the www folder using Phonegap

How can I load an mp3 file on iOS from the www folder located next to my HTML? I am using phonegap and have followed the example provided in the documentation: The code works fine on iOS and Android when loading an mp3 from the web, but I encounter an iss ...

androidioshtmlaudiocordova

What is the best way to show the initial 20 words on the screen, followed by the next 20 words using

Within a single tag, I have a string as shown in the example below. My goal is to display the first 20-25 words on screen, then continue with the next set of words, and so forth. Once 20 words are displayed, the remaining text should be hidden. <p>Lo ...

javascripthtml

If the URL matches a specific path, then append a parameter

I've created a script that adds a parameter to a URL based on specific subfolders. For example, if the URL contains /de, it will add ?_sft_language=german. However, I'm encountering an issue where the code is running multiple times instead of jus ...

javascripthtmljquery

Detecting resolutions on an iOS Simulator using PhoneGap

As a newcomer to the world of development, I am diving into the process of creating iOS apps using Phonegap. To accommodate different resolutions, I have developed four separate CSS files. <link rel="stylesheet" media="only screen and (max-device-width ...

cssioscordovaxcode4ios-simulator

In Internet Explorer, the list items are overlapping, while functioning perfectly in all other web browsers

I've encountered a strange issue with my list item in Internet Explorer. Despite working perfectly in Chrome and other browsers, it fails to function properly in IE. I've built this application using the Vue framework and have faced various probl ...

javascripthtmlcssinternet-explorervue.js

AngularJS - Organize Item Hierarchy with Separate Containers for Each Group

My goal is to incorporate a $scope variable within an AngularJS controller that has the following structure: $scope.hierarchy = { name: 'bob', selected: true, children: [ { name: 'frank' }, { name: 'spike' ...

javascripthtmlangularjs

tips for adding text to an input field after it has been submitted

Is there a way to automatically add text to an input field after the user has entered their information? For example, if a user types "youtube.com" into a search bar, could the input then apply ""? ...

javascripthtml

JSP Error: the specified resource cannot be found

I am a newcomer to this website, and as a programmer, I consider myself to be at a beginner to intermediate level. I am new to Java and have to work with JSP for a University course. I am encountering an error and would like help in identifying what is wro ...

javahtml

Navigating Overlays with Python and Selenium

driver.find_element_by_class_name("lnkClassInfo").click() time.sleep(2) element = driver.find_element_by_css_selector("#popup input[value='BOOK THIS CLASS NOW']") driver.execute_script("arguments[0].click();", element) ERROR: selenium.common.exc ...

pythonhtmlseleniumiframeoverlay

Align the brand logo in the center of the navbar and position the 'help' icon to the right

I am facing a challenge in adding an icon to the right of my centered brand text without affecting its alignment. Currently, the text is perfectly centered at the top. I wish to place an icon on its extreme right side. Here is how it looks presently And ...

cssbootstrap-4

There seems to be an error with JVectorMap: the <g> attribute transform is expecting a number but is instead receiving "scale(NaN) translate(N..."

Hey there! I'm currently working on creating a form with a map to select the country of birth using JVectorMap. However, when checking the Google Chrome developer console, I encountered the following error message: jquery-jvectormap-2.0.5.min.js:1 Err ...

javascripthtmlcssjvectormap

Using the `display: inline-block` property will generate a horizontal line at the bottom of the

While working on developing a website to showcase the services of a company, I encountered an unexpected issue. When coding another section of the site, a strange bar appeared on my second menu for selecting categories. It's driving me crazy! You can ...

htmlcsstext-align

I am trying to create a show/hide password feature, but unfortunately, it's not functioning

Can anyone help me figure out why my show/hide password functionality isn't working properly? I've tried to toggle the visibility of the password using an eye icon, but it's not hiding the password correctly. const Password = document.get ...

javascripthtmlcss

Troubleshooting: Bootstrap v4.0.0 compatibility issue in Wordpress

Hey there! I recently began creating a website on Wordpress, but I encountered an issue where the basic bootstrap components weren't functioning correctly. Yes, the links are properly set up. (No errors in my developer tools) Yes, I'm using th ...

wordpresswordpress-themingbootstrap-4

The slick jQuery plugin seems to be malfunctioning

I recently downloaded the jQuery files in order to implement some image sliders on my website, but unfortunately, they are not functioning properly. Is there anyone who can help me identify any issues with the code? Thank you in advance. <body> ...

javascriptjquerycss

What is the best way to incorporate a unique box shadow onto my svg image?

While I've seen a similar question here: How to add box-shadow to a svg path circle shape, I am struggling to grasp how the transition from box shadow characteristics to SVG drop shadow characteristics was achieved. (Especially given that SVG Drop sha ...

csssvg

Prevent entering alphabetic characters in Bootstrap time picker

Is there a way to prevent alphabet input in the Bootstrap time Picker? This is my current time Picker code: <div class="bootstrap-timepicker"> <input id="timepicker4" type="text" class="form-control" name="startingTime" val ...

jqueryhtmltwitter-bootstrap