I've been experimenting with CSS on a div for a while now, but I'm still struggling to replicate the image below.
If anyone can offer some guidance, it would be greatly appreciated. I'm looking for a solution involving a div or another element that allows text to be inserted.
A little challenging, but entirely achievable using only CSS.
Here's the HTML structure:
<span class="hover-me">Hover over me</span>
<div class="tooltip">
<div class="tooltip-origin-border">
<div class="tooltip-origin-inner">
</div>
</div>
<div class="tooltip-content">
This is a tooltip message.
</div>
</div>
And the corresponding CSS styling:
.tooltip {
position: absolute;
margin-top: -30px;
margin-left: 120px;
display: none;
}
.tooltip-content {
padding: 10px;
border-radius: 5px;
border: 1px solid #33c;
background: #ddf;
}
.tooltip-origin-border {
border: 10px solid transparent;
border-right-color: #33c;
margin-top: 10px;
margin-left: -19px;
position: absolute;
}
.tooltip-origin-inner {
border: 8px solid transparent;
border-right-color: #ddf;
margin-top: -8px;
margin-left: -6px;
position: absolute;
}
.hover-me {
cursor: pointer;
}
.hover-me:hover + .tooltip {
display: block;
}
You'll need to experiment with the positioning to get it just right. The "arrow" effect is created using clever border manipulation to form a triangle shape. Check out the example on Jsfiddle
If you're in need of a solution, I recommend checking out CssArrowPlease.
Check out this awesome example ->http://jsfiddle.net/abc123/
Hopefully, this is exactly what you've been searching for!
Custom CSS Styling:
#custom-box{
display: block;
position: absolute;
border: 2px solid #333;
padding: 20px;
height: 100px;
width: 150px;
color: #000;
background: #f3f3f3;
border-radius: 5px;
}
#custom-box:before{
content: '';
position: absolute;
border-width: 6px 6px 6px 0;
border-style: solid solid solid none;
border-color: transparent #f3f3f3 transparent;
top: 10px;
left: -6px;
}
Custom HTML Content:
<div id="custom-box">
Show off your unique self and what sets you apart!
</div>
Maybe this will be useful for you:
Check out these Pure CSS speech bubbles:
Are there any other options besides Bootstrap for a predefined CSS library that can help align and customize an HTML page quickly? I have been using ASP.NET and Bootstrap for my development, but I'm looking for something new. If there is another libr ...
Is there a CSS selector that can prevent content insertion on new lines when using the wrap feature in CSS-Flexbox? I am utilizing CSS-Flexbox for a layout with the wrap option, but I do not know the number of lines beforehand. I need a solution where the ...
I'm struggling to apply height and width to empty spans using CSS, but the span only fills its content <div class="container"> <div id="widgets-container"> <span class="widget" name="widget1" style="background-col ...
After recently beginning to learn HTML and CSS, I have encountered some confusion. Take a look at this table design for screens under 500px, and then compare it to how it should appear on screens 500px or larger. I believe utilizing a media query may be t ...
I need to create a footer, but I'm struggling with placing a circle at the top half of the footer like this. Even though I can create a footer, I still encounter some issues. This is the code I have right now: .Footer { position: fixed; left: ...
Looking at this div structure: DIV3 has a fixed height. The nested DIV5 will be receiving content from Ajax, causing its height to change. Additionally, there are some DHTML elements inside it that also affect the height. DIV5 has a fixed min-height set. ...
I am facing an issue with a dynamically filled div where the content exceeds a specific height, causing overflow:auto to display a scroll bar only after surpassing that threshold. My task now is to apply a 1px border around the entire div only when the co ...
I ran a test script that looks like this: async function testDownload() { try{ var urls = ['https://localhost:54373/analyzer/test1','https://localhost:54373/analyzer/test2'] var fullFile = new Blob(); for (le ...
function refresh_group_items(){ //console.log("calling1"); window.setTimeout(function(){ $$("cfg").reconstruct() }, 3000); } $.ajax({ type: "POST", xhrFields:{ withCredentials: true }, beforeSend: function(reque ...
I recall seeing this technique used before, but I am struggling to remember where. My goal is to modify the content of a div when the css :hover state is activated. Below is the CSS code that I am attempting to make work: .mWin_close:hover div.new-label ...
When we scroll down the page, the next section should automatically bring us back to the top of the page without having to use the mouse wheel. .bg1 { background-color: #C5876F; height: 1000px; } .bg2 { background-color: #7882BB; height: 1000px; } .bg3 ...
After recently upgrading to the most recent version of Chrome (17.0.963.56), I've noticed that the property window.document.height is no longer valid. Has anyone else experienced this issue? I haven't been able to find any information about why i ...
My controller code: $scope.totals = totals; In the template, I am able to successfully inject HTML using this code: {{totals}} However, my goal is to access the totals variable in a script within the template. Here's what I attempted: <script& ...
Seeking assistance with my php code dilemma. I am attempting to insert data into mysql using a form that includes a video upload option which stores the video locally and the video URL in the database. However, when testing the form, I encounter multiple e ...
As I strive to programmatically shift focus in my form using nextElementSibling, I encounter a challenge with typing variables/constants due to working with Typescript... I have managed to achieve success without typing by implementing the following: myF ...
I developed a unique custom directive. angular.module('menu',[]) .directive('MenuDirective',function(){ return{ restrict:'E', replace:'true', scope:{ m ...
I am currently using an SVG sprite as the background image for my project: .naar-logo { background: url(images/salt_sprite.svg) no-repeat -8px -78px; width: 36px; height: 49px; position: relative; top: 38px; } <div class="naar-logo ...
$(".item_listing").hover(function(){ $(".overlay_items").display(); },function(){ $(".overlay_items").hide(); } ); This is my jQuery code. I am trying to display the "overlay_items" div when the "item_listing" div is hovered ov ...
In the admin pages of my Wordpress installation, I have created an HTML form. My goal is to validate the data inputted when the submit button is pressed using a Javascript function. If the data is not correctly inserted, I want alerts to be displayed. Desp ...
Recently, I updated an HTML file and the global CSS style sheet on my personal website. While the changes appear correctly on my computer, the website still reflects the old settings. I've taken several steps to troubleshoot this issue: Emptied my b ...