What's the reason the bootstrap tooltip style isn't displaying?

Seeking assistance with styling text in a bootstrap tooltip. My request is straightforward: I would like the text in the tooltip on the first button to be displayed in red color. I have used 

data-html="true"

attribute to allow HTML in the tooltip. However, why isn't it showing in red?

<button data-toggle="tooltip" data-html="true" data-trigger="click" title="<div style='color:red;'>this text should be red</div>">
    Press me
</button>

In addition, for the next tooltip, I want it to be visible right away without being hidden by the table layout. Could this be caused by the same issue?

<button data-toggle="tooltip" data-html="true" data-trigger="click" title="<table><tr><td>this text should appear</td></tr></table>">
    Press me 2
</button>

I have created a fiddle demonstrating the problem clearly.

https://jsfiddle.net/ws9z37q2/9/

Your help and guidance would be greatly appreciated. Thank you in advance!

javascriptjquerycssbootstrap-4tooltip

Answer №1

Assign a class to the element and then use CSS to style that class.

$(function() {
  $('[data-toggle="tooltip"]').tooltip()
})
.red {
  color: red
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />


<button data-toggle="tooltip" data-html="true" data-trigger="click" title="<div class='red'>this text should be red</div>">
  Press me
</button>

Upon inspecting Bootstrap's source code on GitHub, it was discovered that by default, HTML content is sanitized, which means the style attribute is not permitted. For more information, refer here.

An alternative solution would involve disabling the sanitize option (although this is not recommended).

$(function() {
  $('[data-toggle="tooltip"]').tooltip({
    sanitize: false
  })
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />


<button data-toggle="tooltip" data-html="true" data-trigger="click" title="<div style='color:red'>this text should be red</div>">
  Press 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

Struggling to grasp the concept of PHP LZW decompression function within JSend framework

I am currently working on converting the LZW decompressor from PHP to JavaScript and I have encountered a function that is giving me some trouble. function decompressLZW(aCodes) { var sData = ''; var oDictionary = []; for (var i = 0; i &l ...

phpjavascriptcompressionlzw

Using ngTable within an AngularJS application

While working on my angularjs application, I encountered an issue with ngtable during the grunt build process. It seems that the references are missing, resulting in the following error: Uncaught Error: [$injector:modulerr] Failed to instantiate module pa ...

javascriptangularjsnpmbower

Adding static JSON array data to the results received from an API call

Within my code snippet below, I am able to retrieve a JSON Response: respArray = [] respArray = respBody.classifiers respBody = respArray if (respBody.length > 0) { respBody = applyPagination(respBody, reqParams.filter, option ...

javascriptarraysjson

Unable to display image on HTML page in Sails JS

In my current project, I am utilizing Sails Js and Mongo DB for development. When a user uploads an image and content for a blog post, I store it in the images folder and save the file destination along with the content to MongoDB. My goal is to display bo ...

javascripthtmlnode.jssails.jssails-mongo

Passing arguments from the server to the client

Here is some code that I am working on which includes a dropdown and a JavaScript function being called from the server side. I am having trouble passing a parameter to the JavaScript function. Can anyone help me resolve this issue? Server-side code: Pa ...

javascriptasp.net

Ways to eliminate redundant older React components within a different library

Having trouble with material-ui in my React project as I encounter this error. Error: Invalid hook call. Ensure hooks are only called inside the body of a function component. Check for: Possible mismatch of React and renderer versions (i.e., React DOM) ...

javascriptreactjsmaterial-ui

Vue.JS component containing DOM elements outside of the designated $el scope

Transitioning from a custom front-end framework to Vue is a new adventure for me. Our website is gradually integrating Vue, and as we refactor old components, I've encountered an issue. My question is: Can a component create DOM elements outside of i ...

javascriptvue.jsvue-component

Utilizing highcharts to visualize non-linear time data pulled from a CSV file

I am seeking guidance on implementing a simple graph based on data from a CSV file in web development. I lack experience in this area and have struggled to find a suitable example to follow. The CSV file contains data in the format of a unix timestamp, hu ...

javascripthtmlajaxhighcharts

Contrasting the variances between the $(window).load() and $(document).ready() functions

Can you explain the contrast between $(window).load(function() {}) and $(document).ready(function() {}) in jQuery? ...

jquery

Exploring Angular 6's nested routes and corresponding components for child navigation

I'm currently diving into the concept of lazy loading in Angular 6. Here's a visual representation of the structure of my application: ─src ├───app │ ├───components │ │ ├───about │ │ ├─── ...

javascriptangularhtmltypescriptbootstrap-4

Aligning elements of unknown width within a container of a specified width

Currently struggling to find a resolution to the following issue: Trying to create a navigation bar using a ul element set to a specific width of 530px with multiple li items nested inside. The goal is to have the li items evenly fill the 530px width wit ...

htmlcsslayoutwidthcentering

Elements that are added dynamically do not contain any space between each other

I have a markup template that looks like this. <template id="unsequenced-template"> <button type="button" class="btn btn-primary railcar"></button> </template> Then, I use the following JavaScript ...

javascripthtmljquerytwitter-bootstrapbootstrap-5

Does the react-google-login library utilize the services provided by Google Identity?

Currently incorporating the react-google-login library (https://www.npmjs.com/package/react-google-login/v/5.2.2) in my JavaScript codebase to grant users access to my website. Can anyone confirm whether this library utilizes "Google Identity Services" or ...

javascriptreactjsgoogle-signin

Top-notch java tool for caching and minifying dojo, jquery JavaScript, and CSS files

In our project, we have downloaded the Dojo and jQuery libraries from Google CDNs. I am currently seeking a Java tool that can both cache and minify these libraries. The caching process should take place within the ROOT project of Tomcat. While I am awar ...

javajavascriptcsscachingminify

How can PHP Ajax be used to determine when a modal should pop up?

Is there a way to automatically display a modal without refreshing the page? Currently, I have a button that submits to home.php and triggers the modal, but it requires a page refresh for the modal to appear. I'm looking for a solution that will eith ...

javascriptphpjquerymysqlajax

Creating a PHP Class for Converting CSS3 Rules to Ensure Compatibility Across Different Browsers

Seeking assistance with developing a class that can process a style sheet, identify browser-specific CSS3 rules, and provide compatibility for all browsers. The goal is to simplify the process of writing styles for one browser and then generating CSS files ...

phpcsscross-browser

Issue with Initializing MongoDB Database

Attempting to start a MongoDB database server is resulting in an error where the server fails to start. To address this, I have executed the mkdir -p data/db command in the project directory. The command I am running is: mongod --dbpath=data/ --port 27017 ...

javascriptmongodbmacos

Identify the hover event within a div element

There is a parent div with a child div inside it. I want the border color and text of the child div to turn white when a user hovers over the parent div. For instance, in the example provided, the text inside the box that says No score, yet click and subm ...

htmlcsstailwind-css

Guide on integrating multiple v-for and v-if conditions within a Vue.js table

I need to create a table that includes several v-if and v-for statements. Here is my current attempt: <table> <span v-for="(option, optionk) in bundle_item.build_options" v-bind:key="optionk"> <span v-for ...

javascriptvue.js

Executing JQuery code following an Ajax request

I'm struggling to make this part of my jQuery script work properly after the Ajax content switch... /*preventing right-click on images*/ $('img').bind('contextmenu', function(e) { return false; /*image rollover effect*/ $(&apo ...

jqueryajax