create a clear backdrop

Creating a question mark icon that reveals helpful tips when hovered over.

/*-------------------------
    Inline help tip
--------------------------*/
.help-tip-wrapper{
  padding-top: 15px;
  padding-left: 5px;
}

.help-tip{
    text-align: center;
    background-color: #BCDBEA;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    font-size: 14px;
    line-height: 26px;
    cursor: default;
}

.help-tip:before{
    content:'?';
    font-weight: bold;
    color:#fff;
}

.help-tip:hover p{
    display:block;

    -webkit-animation: fadeIn 0.3s ease-in-out;
    animation: fadeIn 0.3s ease-in-out;

}

.help-tip p{
    display: none;
    background-color: #1E2021;
    padding: 20px;
    width: 300px;
    border-radius: 3px;
    right: -4px;
    color: #FFF;
    font-size: 13px;
    line-height: 1.4;
}

.help-tip p:before{
    content: '';
    width:0;
    height: 0;
    border:6px solid;
    border-bottom-color:#1E2021;
    right:10px;
    top:-12px;
}

.help-tip p:after{
    width:100%;
    height:40px;
    content:'';
    top:-40px;
    left:0;
}

<div class="d-flex justify-content-inline">
                <p class="pt-3 pl-3">Categories</p>
                <div class="help-tip-wrapper">
                    <div class="help-tip">
                        <p>Please select a category before registering a terminal. You can create nested categories.</p>
                    </div>
                </div>
            </div>

When hovering, the displayed text is on a see-through background, making it hard to read and showing elements from behind. How can I fix this issue by making the background opaque?

htmlcssbootstrap-4

Answer №1

Make sure to add position: relative; to the p element:

/*-------------------------
    Custom inline help tooltip
--------------------------*/
.help-tip-wrapper{
  padding-top: 15px;
  padding-left: 5px;
}

.help-tip{
    text-align: center;
    background-color: #BCDBEA;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    font-size: 14px;
    line-height: 26px;
    cursor: default;
}

.help-tip:before{
    content:'?';
    font-weight: bold;
    color:#fff;
}

.help-tip:hover p{
    display:block;

    -webkit-animation: fadeIn 0.3s ease-in-out;
    animation: fadeIn 0.3s ease-in-out;

}

.help-tip p{
    display: none;
    background-color: purple;;
    padding: 20px;
    width: 300px;
    border-radius: 3px;
    right: -4px;
    color: #FFF;
    font-size: 13px;
    line-height: 1.4;
    position: relative;
}

.help-tip p:before{
    content: '';
    width:0;
    height: 0;
    border:6px solid;
    border-bottom-color:#1E2021;
    right:10px;
    top:-12px;
}

.help-tip p:after{
    width:100%;
    height:40px;
    content:'';
    top:-40px;
    left:0;
}
<div class="d-flex justify-content-inline">
                <p class="pt-3 pl-3">Categories</p>
                <div class="help-tip-wrapper">
                    <div class="help-tip">
                        <p>Please select a category before registering a terminal. You can create nested categories.</p>
                    </div>
                </div>
                <p>asfasddddddddddddddddddddddd</p>
            </div>

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

Is there a way to dynamically modify a website's default viewport settings in a mobile browser?

When viewing a website in Landscape mode, everything looks good. However, switching to Portrait mode displays the message "Screen size not supported." I decided to test this on my desktop browser and discovered that adjusting the initial-scale:1 to initial ...

javascripthtmlcssviewport

Align the center element vertically on a website with a Bootstrap 4 navigation bar

I am trying to vertically center an element on the page. It works fine until I add a Navbar, which causes the element to be centered with an offset from the height of the Navbar. How can I center the content container vertically while accounting for the Na ...

htmlcsstwitter-bootstrap

Download and print the embedded PDF file

I am having trouble figuring out how to add 2 external buttons to print and save an embedded pdf on my webpage. Despite searching Google for hours, I have not been able to find a solution that works. The embedded object already has buttons for printing and ...

javascriptjqueryhtmlpdf

Having trouble converting my form data into an array for table display

My website has a form for entering dummy patient information, with a table to display the submitted data. However, I'm facing an issue where the data is not being stored in the array when the user clicks the "Add Patient" button. Upon checking the arr ...

javascriptjqueryhtmlarrayshtml-table

Letters are frolicking in varying sizes and designs

Currently, I am encountering a strange issue with the text on my webpage. Some fonts are displaying with completely different shapes and sizes despite using <meta charset="UTF-8"> to ensure font consistency. Unfortunately, this did not resolve the pr ...

htmlcss

The header bar intrudes into the main content area

I am in the process of transitioning my landing page design from Bootstrap to Semantic-UI. The layout includes a fixed top navbar and main content split into two columns (3-cols and 9-cols) - the left column is reserved for a sidebar, while the right colum ...

htmlcssgrid-layoutsemantic-ui

Attempting to align navigation bar in the middle of the page

I'm facing some issues with centering the navigation bar on my website. I attempted to use a wrapper div to center it, but unfortunately, it didn't work out as expected. The only thing that seems to be working within that div is adjusting the lef ...

htmlcssnavigationcenter

Customizing SharePoint Web Part Styles with CSS: Header Alignment Issue with Body_TEXT

I am currently working on branding a SharePoint website and have encountered an issue with aligning background colors for the title area and body of some web parts. Despite applying background colors, the alignment between the title and body areas is off ( ...

csssharepointweb-partsbranding

The evolving impact of the HTML5 <video> element

I've been attempting to find information on this topic, but unfortunately my search has not been very successful. I vaguely recall coming across a tutorial that covered something like this. Does anyone happen to know how to alter the perspective of a ...

jqueryflashhtmlcsscanvas

Is there a way to remove the entire row if I dismiss a bootstrap alert?

Hey there! I'm having a little issue with an alert in a row-fluid. Curious to see? Check out my fiddle. So, when I click the "x" button to dismiss the alert, the row is still visible. Any idea how I can make the entire row disappear when I dismiss it? ...

csstwitter-bootstrap

"Exclusive Mui sx styles will be applied only when a specific breakpoint

As I update my old mui styling to utilize the sx attribute, I've noticed the ability to specify styles for different breakpoints using sx = {{ someCssProp: { xs: ..., md: ... and so on. Prior to this, I had been using theme.breakpoints.only for some ...

javascriptcssreactjsmaterial-uibreakpoints

A unique technique for creating a stunning visual effect with images using

Can anyone help me with this issue: Check out this animated GIF The images in my project are overlapping when scrolling! How can I achieve a similar effect for my images? Is there a tutorial or plugin available for this? Here is the current code sn ...

javascripthtmlcss

jQuery for Implementing Pagination Across Multiple Tables

As a novice in the world of JavaScript and jQuery, I am struggling with implementing pagination for multiple tables on a single page. My goal is to have several tables that can be paginated using one navigation system. However, all my attempts so far have ...

javascriptjqueryhtml

Is it possible for me to load a window following a click

I developed a customized Modal Box that functions similar to the browser's "alert()". When using the traditional alert(), it halts the rendering and executions of the underlying webpage. I am seeking methods to achieve this same behavior: preventing ...

javascriptjqueryhtmldom

Unable to function in simplistic html/php code, 'Require' fails to operate as intended

I am facing an issue while attempting to import a header.php file into my index.php file. For some reason, it is not working as expected. header.php: <!DOCTYPE html> <html> <head></head> <body> <header> & ...

phphtmlrequire

Navigate to the top of the div elements

My goal is to replicate the functionality of . I want a feature where scrolling automatically takes users to the top of the next or previous div. $(window).bind('scroll', function () { $('html, body').animate({scrollTop:$('# ...

javascriptjqueryhtmlscroll

When viewed on mobile devices, two 100vh sections are overlapping each other

My goal is to create two sections that fill the entire viewport height in the browser. The code below is functioning properly on the desktop version. However, on mobile devices, the content of section two (consisting of 3 bootstrap columns with text) is ov ...

htmlcsstwitter-bootstrapresponsive

Issue with Reactstrap Bootstrap Navbar functionality within a React application

After using 'create react-app' to create a new React app, I decided to include a navbar from Reactstrap. Following the instructions on the Reactstrap website, I copied and pasted the code for the navbar component: import React from 'react&a ...

reactjsbootstrap-4navbarcreate-react-appreactstrap

Creating a button in ReactJS with text displayed under an icon

Presently, I am working with a component that looks like this: https://i.stack.imgur.com/qGCwj.png This is the code for the component: import React from "react"; import {withStyles} from "material-ui/styles"; import Settings from "material-ui-icons/Setti ...

javascriptcssreactjsmaterial-ui

Challenges with Internal Styling on Wordpress Sites

Okay. I've been dealing with some internal style issues on my Wordpress website. After dedicating hours to trying to change styles for various elements, I realized that the main html file contained a bunch of internal style sheets that were overridin ...

htmlcsswordpresstemplates