A pale tooltip with a light arrow appearing against a soft white backdrop

Can someone help me figure out how to display a white tooltip with a white arrow? I've tried to implement it using the code below, but the white color is not visible against the background. Any suggestions on making it stand out?

$(function () {
  $('#tooltip').tooltip('show');
});
#tooltip, {
  position: relative;
  color: #fff;
}
.tooltip-inner {
  background: #fff;
}
.tooltip.bottom .tooltip-arrow { 
  border-bottom-color: #fff;
}
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<label for="epcfLevel3Name" class="col-md-5 required">button<span id="tooltip" data-placement="bottom" title="Tooltip" class="glyphicon glyphicon-info-sign pull-right"></span></label>

javascripthtmljquerycsstooltip

Answer №1

One issue with the code snippet is that the external CSS is taking precedence over the inline CSS, requiring the use of !important to override it.

Below is a style similar to what is shown in your screenshot:

$(function() {
  $('#tooltip').tooltip('show');
});
.tooltip-inner::before {
  background-color: #fff;
  box-shadow: -2px -2px 2px 0 rgba(178, 178, 178, .4);
  content: "\00a0";
  display: block;
  width: 8px;
  height: 8px;
  margin: auto;
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  margin-top: 2px;
}

.tooltip-inner {
  background-color: #fff !important;
  color: #000 !important;
  box-shadow: 0px 0px 6px #B2B2B2;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<label for="epcfLevel3Name" class="col-md-5 required">button<span id="tooltip" data-placement="bottom" title="Tooltip" class="glyphicon glyphicon-info-sign pull-right"></span></label>

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

Ordering ng-repeat in AngularJS using a separate arrayDiscover how to easily order your

Imagine I have an array containing keys in a specific order orderedItems=["apple","banana","orange]; and there is a JSON object that I want to display using ng-repeat but following the sequence specified in the array: {"fruits": { "apple":{ ...

javascriptarraysangularjsangularjs-ng-repeatangularjs-filter

Easily validate your email with this straightforward form. Completely puzzled

Today's challenge is tackling the email validation form issue. While searching for a solution, I stumbled upon an interesting code snippet: http://jsfiddle.net/jquery4u/5rPmV/ dyingOverHere(); The code seems to work flawlessly in the demo provided. ...

jqueryhtmlvalidation

Creating a Cordova application from the ground up, evaluating the options of using ngCordova, Ionic framework, and

With the goal of creating a multiplatform Cordova app for Android, iOS, and Windows, I have been exploring different approaches. My plan is to build an application with 4 or 5 features focused on service consumption (listing, adding, and editing items) wh ...

javascriptangularjscordovatypescriptionic-framework

Expanding a table by including a new column using Node.js and Knex

Currently building a service for my router using Node.js and Knex, but I'm struggling to add a column to an existing table. Any assistance would be greatly appreciated. Even though I am working with PostgreSQL, I believe the solution will be similar r ...

javascriptnode.jspostgresqlbackendknex.js

Not every child within a transition group in Vue.js is currently engaged in animation

This is the specific transition group that I have implemented <article class="hotel-row" v-for="hotel in paginatedHotels" :key="hotel.hotelid"> <search-hotel :hotel="hotel"></search-hotel> </article> If I do not assign unique ...

javascriptanimationvue.jsvuejs2vue-component

Unusual Login Problem Involving Ajax, jQuery, and PHP

My login header has two dynamic links: login/register and profile/logout. I previously used a PHP class function to check if the user was logged in and display the appropriate links, which worked well. Recently, I switched to an Ajax login to avoid page ...

phpjqueryhtmlajax

Adjust the tally of search results and modify the selection depending on the frequency of the user's searches within an array of objects

Seeking assistance with adding a new function that allows users to navigate to the next searched result. Big thanks to @ggorlen for aiding in the recursive search. https://i.stack.imgur.com/OsZOh.png I have a recursive search method that marks the first ...

javascriptarraysangulartypescript

Photo captured by camera is not stored in photo gallery

I am currently working on a basic image upload form that allows users to take photos using their phone camera and upload them. However, I have noticed that the pictures taken this way are not being saved to the gallery. Is there something missing in the H ...

javascriptangularhtmlandroid-cameramedia

Crosschecking form password with MySQL database for verification

As a newcomer to PHP, I am facing challenges while setting up a login system. My struggle lies in verifying if the password entered in a form matches the corresponding email stored in a MySQL database (considering the email address was also submitted on th ...

phphtmlmysqldatabaseauthentication

Error encountered: API key is required - Issue found in: /node_modules/cloudinary/lib/utils.js at line 982

I encountered an issue with cloudinary while trying to upload photos on my website after adding a new function for Facebook login. "/home/ubuntu/workspace/YelpCamp/node_modules/cloudinary/lib/utils.js:982 throw "Must supply api_key"; ^ Mus ...

javascriptnode.jscloudinary

Enhancing TypeScript - Managing Variables within Namespace/Scope

Why is the console.log inside the function correctly logging the object, but after the function returns it logs undefined, failing to update the variable? In addition, when using this within testNameSpace, it returns window. Why is that? namespace testNa ...

javascriptjsontypescript

Access information from multiple div elements using JavaScript data-attributes

Having trouble retrieving data-attribute values from multiple divs with the same class when clicked. The goal is to display the data value of the clicked div. function playSound(e) { const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`) ...

javascripthtmlcsscustom-data-attribute

Using Jquery to filter and display results based on user interaction and page load

Upon loading the page, a list of radio buttons and a series of list items (ul/li) are displayed. Initially, the full list is shown. When a radio button is selected, the list gets filtered accordingly. I managed to find some jquery code that worked well fo ...

jqueryjquery-filter

The alignment between the view and controller in Salesforce (Visualforce) is not effectively synchronized

Currently, I am utilizing a visualforce page to input scores for a series of questions. Within the controller, there is a map that stores these values and then saves them to the Database once the save button is pressed. However, upon clicking the button f ...

jquerysalesforcevisualforceapex

I'm having trouble getting my flex items to maintain a specific width and height while staying in a single line

I've been out of practice with flexbox for some time and I can't figure out why the width and height properties are not being applied to each flex item as expected. All the items seem to have an equal width, but not the width that I specified. Ad ...

cssreactjssassflexbox

Weird Chrome behaviors with CSS3 animations

I have been working on a CSS3 animation that involves rotating a div with an image in the background. My goal is to have the same animation play at a different speed when the user hovers over the element. Here is the code snippet I have been using: .roc ...

htmlcsscss-animations

The process of implementing server-side rendering for React Next applications with Material-ui using CSS

I have developed a basic React application using Next.js with an integrated express server: app.prepare() .then(() => { const server = express() server.get('/job/:id', (req, res) => { const actualPage = '/job' const ...

javascriptnode.jsreactjsmaterial-uinext.js

Ways to rearrange an object with javascript

I am looking to restructure my object by removing a nesting. How can I achieve this using JavaScript? Actual: var a = [ { clickedEvents: { 'event-element': 'a', 'event-description': & ...

javascriptjson

Using jQuery flot to create various time charts

I'm trying to combine the visitor count data from this month (chart 1) and last month (chart 2) into a single chart using Flot. While I've successfully created chart 1, I'm facing challenges in overlaying it with chart 2 due to the x-axis pa ...

jqueryjsonflot

Leveraging the "dialogclose" event within jQuery Mobile

Is there a way to change an image once it is clicked and change back when the dialog it links to is closed? I found a potential solution on this site, but after modifying it for my needs, it doesn't seem to work. Can anyone help me figure out what I a ...

javascriptjqueryhtmljquery-mobilepopupwindow