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?

https://i.sstatic.net/Y7W2r.png

$(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

Having Trouble with Shopify's Asynchronous Ajax Add to Cart Feature?

I have developed a unique Shopify page design that allows users to add multiple items to their cart using Shopify's Ajax API. I've created a test version of the page for demonstration: Below is the current javascript code I am using to enable as ...

javascriptajaxshopify

What is the best way to automatically add a date and timestamp to every new entry?

I am currently working on a project that utilizes AngularJS and Ionic frameworks. The main feature of the project will involve users inputting data to create a list, and allowing any user to comment on each item in the list. One challenge I have encounter ...

javascriptangularjsionic-framework

Using i18next to alter language in a React app

Implementing the i18next translation system into my React app was a breeze thanks to a helpful guide I found. However, I'm facing an issue with changing the language manually. The guide covered the setup process perfectly, but lacked information on ho ...

javascriptreactjsinternationalizationi18next

What is the procedure for closing a snackbar when the close button is clicked?

I am having trouble closing a snackbar when the close button is clicked. The snackbar should initially pop up on page load and only close when manually triggered. I have set the timeout to zero, but the snackbar does not close when the close button is clic ...

javascripthtmlvue.js

Choose a specific portion of text following an element in HTML using CSS

I would like to style the text following the span tag using CSS without affecting the span tag itself. Specifically, I want to apply styling only to the text that reads "Text to be selected", leaving the span tag unaffected. The style I desire i ...

csscss-selectors

When using Asp.Net TextBox, the focus is lost after inputting the first character

I have created an Asp.Net web form (aspx) that includes a TextBox: <div id="field"> <asp:TextBox Id="Name" runat="server" MaxLength="50"/> </div> Whenever I type characters into the TextBox, I t ...

javascriptjqueryasp.netajaxwebforms

iPad screen not displaying overflow for x and y axis

I'm encountering an issue with displaying the scrollbar on a div while using an iPad device. Currently, I am utilizing: -webkit-overflow-scrolling: touch; Although this is functioning properly, my goal is to have the scrollbar visible without the ...

jqueryhtmlioscssoverflow

Passing arguments inside the source attribute of an image or link tag in Node.js and

As a beginner in NodeJS, I am facing an issue with passing arguments inside links and image sources. In my template.html file, I have included various scripts and elements to create a search form. The issue arises when I try to incorporate values from the ...

javascripthtmlnode.jsvue.js

Iterating over a table and selecting a specific button on the rows that meet a specific condition

I'm having a bit of trouble and would really appreciate your help. I'm attempting to write a script that will scan through this table and delete any row that contains the word "active". The script needs to check every row in the table. The code ...

pythonhtmlseleniumpytest

Troubleshooting problem with Vuetify's parallax fluid template

In my quest to implement a fluid template for responsive design viewports, I encountered an issue. The layout looks good on medium viewports (md) but fails to scale correctly on smaller viewports (sm or xs). This is because the height of the parallax backg ...

cssvue.jsparallaxvuetify.js

Suggestions to reduce our website loading time

Query: How can one effectively reduce the file size of a webpage to improve loading speed? What specific optimization practices and coding techniques (in JavaScript and PHP) can be implemented to decrease page weight? Motivation: After reading an article ...

phpjavascriptjqueryperformanceoptimization

Encountered a server error while trying to export from Content

I'm attempting to retrieve data from a specific space in Contentful by utilizing the https://github.com/contentful/contentful-export npm package. However, when I execute my code following the example provided on the GitHub page, I encounter the follow ...

javascriptnode.jsnpmexportcontentful

The lightSlider is only destroyed and rebuilt once during its operation

I am facing a challenge with multiple buttons having the same class while trying to destroy and rebuild the lightSlider script. In the CMS where I have implemented this, images and ajax are being loaded. However, as the JavaScript is triggered by the read ...

javascriptjqueryajax

Utilize conditional styling along with hover effects in ReactJS

I'm facing an issue where I need to set up a conditional style and a hover effect for TableRows. They work fine individually, but when combined, the hover function stops working. CSS const StyledTableRow = withStyles((theme) => ({ root: { tab ...

cssreactjswebstormjsx

Problem with transitioning to a different page on Next.js

I am having trouble navigating to a different page in Next.js using the router.push function. The goal is to route to "example.js" by utilizing a variable called ChangePage, which leads to a single div element on that page. However, despite following the ...

javascriptreactjsnext.jsnavigation

What causes the reflection of JavaScript variables when there is a change in ng-model?

By declaring the object globally and assigning it during an HTTP call when the Angular controller loads, I am able to update the values of this object in the Angular scope variables and access them through ng-models. When a button is clicked and one of the ...

javascriptangularjsasp.net-mvc

What is the best way to incorporate audio playback while browsing files on an HTML5 webpage with TypeScript?

<input type="file" id="soundUrl" (change)="onAudioPlay()" /> <audio id="sound" controls></audio> This is the HTML code I'm working with, and I'm looking to trigger audio playback after a user selects an MP3 file using TypeScrip ...

angularhtmltypescript

When using AngularJS, compatibility issues may arise with loading ASP.Net MVC Partial Views triggered by a @Ajax.ActionLink()

Currently, I am facing an issue while trying to incorporate AngularJS into ASP.Net MVC. The problem arises when AngularJS does not seem to work in the rendered view called from @Ajax.actionLink(). Below is a snippet of the code that I have experimented wit ...

jqueryasp.netajaxangularjsasp.net-mvc

Display MySQL information in a tabular format with segmented sets of data

My goal is to retrieve data from a MySQL table and present it in a table format. Currently, I am using individual queries for each cell as shown below: $sql = "SELECT Sum(combined_data.`List Price`) AS total_dollar_amount, Count(combined_data.sysid) AS to ...

phpmysqljquery

Generating a collection of items using a pre-existing array of items

Struggling to create an array of objects based on another array of objects. I attempted to use flatMap and then reduce, but encountered an issue when I tried to collect multiple statuses in one object. Below is what I have attempted and the desired result ...

javascriptarraysobject