CSS tooltip within the document styling

Previously, I utilized the following code: I am seeking guidance on how to position the tooltip inline (to the right) with the parent div instead of above.

Thank you for reviewing

For a more user-friendly version, refer to this jsFiddle link

HTML:

<div id="wrapper">START.
    <div id="tooltip">GOOD  LUCK !</div>
</div>

CSS:

#wrapper {
cursor: pointer;
position: fixed;
text-transform: uppercase;
background: #39AC9B;
color: #FFFFFF;
font-family: "Gill Sans", Impact, sans-serif;
font-size: 30px;
top: -webkit-calc(50% - 50px);
left: -webkit-calc(50% - 137px);
padding: 16px 25px;
text-align: center;
width: 250px;
-webkit-transform: translateZ(0); /* webkit flicker fix */
-webkit-font-smoothing: antialiased; /* webkit text rendering fix */
}

#wrapper #tooltip {
 background: #1496bb;
 bottom: 100%;
color: #fff;
display: block;
left: -25px;
margin-bottom: 15px;
opacity: 0;
padding: 20px;
pointer-events: none;
position: absolute;
width: 100%;
-webkit-transform: translateY(10px);
 -moz-transform: translateY(10px);
  -ms-transform: translateY(10px);
   -o-transform: translateY(10px);
      transform: translateY(10px);
-webkit-transition: all .25s ease-out;
 -moz-transition: all .25s ease-out;
  -ms-transition: all .25s ease-out;
   -o-transition: all .25s ease-out;
      transition: all .25s ease-out;
-webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
 -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
  -ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
   -o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
      box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
}

#wrapper #tooltip:before {
 bottom: -20px;
 content: " ";
 display: block;
 height: 20px;
 left: 0;
 position: absolute;
 width: 100%;
   }  

#wrapper #tooltip:after {
border-left: solid transparent 10px;
border-right: solid transparent 10px;
border-top: solid #1496bb 10px;
bottom: -10px;
content: " ";
height: 0;
left: 50%;
margin-left: -13px;
position: absolute;
 width: 0;
  }

#wrapper:hover #tooltip {
opacity: 1;
pointer-events: auto;
-webkit-transform: translateY(0px);
 -moz-transform: translateY(0px);
  -ms-transform: translateY(0px);
   -o-transform: translateY(0px);
      transform: translateY(0px);
 }

Answer №1

I have made updates to your JSFiddle by adjusting the following:

#wrapper #tooltip {
...
    top: -3px;
    left: 100%;
    color: #fff;
    margin-left: 15px;
...

Additionally, I have ensured that the triangle now points in the correct direction.

Answer №2

Set the bottom property to 20% within your #wrapper and #tooltip elements. Please take a look at the updated Fiddle for verification. Apologies if this does not meet your expectations

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

Troubleshooting unexpected character error in jQuery Ajax call with ColdFusion 9: JSON parsing issue

I'm brand new to working with AJAX so please bear with me. I'm currently trying to retrieve data from a database using a cfc component with <cfquery> and then converting it to JSON using the serializeJSON(var) function. However, when I che ...

Having several contact forms embedded within a single webpage

I am currently in the process of developing a prototype website and my objective is to have multiple forms on a single page. My goal is to have a form for each service, where users can click on the service and fill out a form to request a quote. The first ...

Looking to fetch the title, description, and uploaded image all in one row and showcase them using PHP

My contact-form-submission.php file is responsible for inserting form data into a Database and uploading logos to the uploads folder. Here's a snippet of the code: <?php $target_dir = "uploads/"; $target_file = $target_dir . basename($ ...

Enhance your online shopping experience with the dynamic feature of adding product bundles to your

I am facing an issue where my code is not adding the product bundles to the cart using AJAX, however, it works perfectly fine with simple and variable products. If I disable the AJAX call function, the code works but unfortunately, it results in the page ...

An issue occurs with the scope of a variable during the compilation of Relay Modern code, resulting in an

I have created the following simple Relay Modern code snippet: import React, { Component } from 'react'; import PropTypes from 'prop-types'; import { QueryRenderer, graphql } from 'react-relay' import environment f ...

Turn off fullPage scroll for resolution below the defined threshold

Currently, I am utilizing fullPage.js (a Javascript plugin that enables one page scrolling functionality). My objective is to disable this functionality when the window width falls below 1199. To achieve this, I have attempted calling the function on both ...

Tips for including arrow symbols in your HTML/CSS code and ensuring that they are adaptable to various

I have been working on the following HTML layout using Bootstrap 4, but I've hit a snag with one element. Check out the design preview below: https://i.sstatic.net/V3tzT.png The HTML code is as follows: <section class="hm_sc_1"> < ...

What is the best way to resize an image to match the height of its flex item sibling?

After reading this answer, I attempted to adjust the size of a flex-item img element to match the height of its sibling. The height was adjusted correctly and the image shrunk accordingly while maintaining its aspect ratio, but the img element still took u ...

Creating layered images with CSS Grid

Visit this link for more details I've been attempting to create an overlap effect with 3 photos using CSS Grid. My desired outcome looks like this: Click here to see the desired result I followed tutorials that demonstrate the same method, but unfo ...

What is the reason for injecting dependencies twice in AngularJS?

I'm a beginner in Angular and I'm curious to understand the reasoning behind injecting all our dependencies twice. Here is an example: var analysisApp=angular.module('analysisApp',[]); analysisApp.controller('analysisController ...

Storing information within a global variable array or exploring alternative methods

I am currently working on a project in electron / node.js and need assistance with the following tasks: Importing data from excel/csv files Visualizing the data using d3.js Cleaning the data by removing duplicates, etc. Using the data for calcu ...

obtain data from JSON using JavaScript

Greetings! I am dealing with a JSON output that looks like this: "{ \"max_output_watts\": 150, \"frame_length_inches\": \"62.20\", \"frame_width_inches\": \"31.81\" }" I am using it in a functi ...

Is it necessary to execute Commit and Begintransaction in SELECT queries?

I'm an MySQL beginner. Should we use commit or beginTransaction in SELECT statements? Let's say the query looks like this db.query("SELECT * FROM my_table") In this scenario, do we need to use commit or beginTransaction? db.query(&quo ...

Exploring the dynamic duo of MongoDB and GridFS

We currently manage a large-scale project that accommodates thousands of users daily. Our database system is MySQL, but we are considering transitioning to MongoDB along with GridFS. Is it feasible to utilize MongoDB and GridFS for projects on this scale? ...

Issue with the bootstrap toggle menu script not functioning as expected

My toggler menu is not working and I'm not sure why. I'd also like to know which links to remove and how to improve my website's speed. When I resize the browser window, the toggle menu icon is not displayed correctly and does not open a new ...

Steps to verify the timepicker for accuracy and consistency throughout different time periods

I am currently working on validating a time picker for a project. I found a helpful example for date validation at http://jqueryui.com/resources/demos/datepicker/date-range.html but I need to adapt it for a time picker. Specifically, I need to ensure tha ...

How can I keep a select menu open when the value changes dynamically?

Is there a way to trigger an ajax request when a user opens a select menu "before the menu opens"? The ajax request would determine which options should be enabled or disabled. Initially, I tried using a click event to make the ajax call. However, the is ...

What is the module system that fabric composer utilizes for its logic JavaScript files?

I am currently in the process of creating a business-network-definition for Hyperledger using Fabric (based on generator-hyperledger-fabric). Everything has been running smoothly so far, but as we move onto our Proof of Concept (PoC), a few questions have ...

The code loses track of the chosen ID

I am having issues retrieving multiple data from a database using two functions. The first function works fine, but when the second function is executed, it appears that the ID is being forgotten. Can anyone assist me in resolving this issue? First and fo ...

Website Not Loading Correctly

Why is my webpage not loading properly, even though it has the same HTML and CSS as my other functioning pages on the site? The page loads without the h1 element. If I comment out the span used for adding a transparent background image behind the whole we ...