Tips on incorporating a hover tip next to a minimized menu

Imagine a hidden side menu that expands upon interaction:

.collapsedSideMenu {
  height: 100%;
  width: 40px;
  background-color: grey;
  color: white;
  font-size: 12px;
  margin: 0px;
  padding: 0px;
}

.menuItem {
  display: flex;
  justify-content: center;
  padding: 8px;
  position: relative;
}

.menuItem:hover {
  background-color: blue;
  color: grey;
}

.menuTitle {
  position: absolute;
  display: flex;
  justify-content: center;
  padding: 8px;
  background-color: blue;
  color: grey;
}
<div class="collapsedSideMenu">
  <div class="menuItem">AB</div>
  <div class="menuTitle">Option AB</div>
  <div class="menuItem">CD</div>
  <div class="menuTitle">Option CD</div>
  <div class="menuItem">EF</div>
  <div class="menuTitle">Option EF</div>
</div>

The task is to display the title (menuTitle) when hovering over its respective option (menuItem), appearing next to the collapsed choice.

For example:

| AB |
| CD | Option AB | << On hover over CD
| EF |

How can this be achieved using CSS/HTML?

htmlcss

Answer №1

Here is a way to modify your code:

.collapsedSideMenu {
  width: 40px;
  background-color: grey;
  color: white;
  font-size: 12px;
  position: relative;
}

.menuItem {
  text-align: center;
  padding: 8px;
}

.menuTitle {
  position: absolute;
  left:100%;
  white-space:nowrap;
  transform:translateY(-100%);
  display:none;
  padding: 8px;
  background-color: blue;
  color: grey;
}
.menuItem:hover + .menuTitle,
.menuTitle:hover{
  display:block;
}
<div class="collapsedSideMenu">
  <div class="menuItem">AB</div>
  <div class="menuTitle">Option AB</div>
  <div class="menuItem">CD</div>
  <div class="menuTitle">Option CD</div>
  <div class="menuItem">EF</div>
  <div class="menuTitle">Option EF</div>
</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

The Angular ngFor loop seems to be stuck in an endless cycle while trying to display

I'm currently in the process of creating a Logbox for my web application. It is designed to receive an Array of logs and display them row by row within a div. I am utilizing ngFor to iterate through my Array of logs and then present them. However, I& ...

htmlcssangulartypescriptngfor

Does UTF-16 encompass ASCII characters? If so, what causes UTF-16 to be at odds with ASCII as stated in the HTML Standard?

The Wikipedia article on UTF-16 states, "...[UTF-16] is also the only web-encoding incompatible with ASCII." (at the end of the abstract.) This refers to the HTML Standard. Is this statement accurate? As a C# / .NET developer, I know that both .NET and .N ...

c#html.netasciiutf-16

What is the best way to reset an event back to its original state once it has been clicked on again

As a newcomer to web development, I'm currently working on creating my own portfolio website. One of the features I am trying to implement is triangle bullet points that can change direction when clicked - kind of like an arrow. My idea is for them to ...

javascriptcssfrontend

Issue with Expo Google Places Autocomplete: ListView not clickable

I am currently encountering an issue with the GooglePlacesAutocomplete feature. When I input the address query, such as "São C," the 'listView' returns options like "São Caetano, São Paulo ...", however, when I attempt to select an option from ...

cssreact-nativeexpogoogle-places-autocomplete

I am encountering an issue where my Vue navbar is successfully changing the route but not updating the corresponding router-view

I have been working on a single-page application using Vue and I encountered an issue with the navbar when navigating through routes. The problem is that after the first click on a navbar item, the route changes successfully but the router-view does not up ...

javascripthtmlvue.jssingle-page-applicationvue-router

What causes the layout of an application to become distorted when I extend the theme in Tailwind.css?

I had the idea of incorporating an animation into my website design using tailwind.css for styling. module.exports = { content: ["./index.html", "./src/**/*.{js,jsx}"], theme: { colors: { primary: "#E51114", ...

cssreactjscss-animationstailwind-css

JavaScript: Adding elements to an array is ineffective

I'm currently working on a function to loop through an array and perform specific actions based on whether an item already exists: If the item is found, remove it If the item is not found, add it to the array However, I've encountered a proble ...

javascripthtmlarrays

The content of the website is only showing up as index.php while being hosted on 1

After signing up for a hosting contract with 1and1, I encountered difficulties in displaying my website. To troubleshoot, I uploaded some basic pages to determine if the issue lay in my files or on the server side. The main page is called index.php and inc ...

phphtmlcss.htaccess

Click once to reveal, click twice to conceal the slider

I currently have a web page set up so that a single click on the text displays a slider for selecting a range of values. Now, I want to incorporate a feature where a double click will remove the slider. Below is the HTML code: <!DOCTYPE html> < ...

javascriptjqueryhtml

Tips for displaying sorting order when the column width is narrower than the caption in free jqgrid

Sorting columns in jqgrid can be done by clicking on the column header, with the ability to set a default sort order upon loading. Icons for sorting are specified using: $grid.jqGrid({ viewsortcols: [false,'vertical',true], The sort icon an ...

jquerycsssortingjqgridfree-jqgrid

Accessing Django static files is proving to be difficult

I recently set up a django project and attempted to integrate an HTML template. Unfortunately, I encountered an issue when trying to access files in the static folder. Below is my current configuration: #BASE_DIR = os.path.dirname(os.path.dirname(os.path ...

pythonhtmldjango

Issues with Ajax response causing PHP and HTML submit button to not function properly

When I have an input on my webpage that is linked with AJAX, it searches for a name in the database and returns the result as an HTML form with values from the database. However, the submit button within the form is not functioning properly. Here is a sni ...

phpjqueryhtmlajaxsubmit

Utilize jQuery to trigger PHP validation script

HTML Code: I have implemented validation using jQuery. My next task is to call a PHP file from jQuery, perform validation in page2.php, and then submit the data to the database. After successful submission, I need to redirect to index.php. However, I am f ...

javascriptphpjqueryhtml

Steps to update the text of the button that is currently selected within an ngFor loop:

Currently, I am using an ngFor loop to display multiple membership options. My goal is to modify the text inside each button from 'select' to 'selected' once a user has made their choice. However, the issue I'm facing is that when ...

htmlangulartypescript

Concealed scrollbar only visible upon resizing the page

For my personal project, I was in need of a custom scrollbar plugin with basic inertia effects and custom images. After some research, I decided to go with mCustomScrollbar. The documentation provided was quite clear, and implementing the script was troub ...

jqueryhtmlscrollbarmcustomscrollbar

Is it possible to conceal the "Image not found" error icon without the need for "this.style.display = 'none'"?

Creating multiple image boxes within a span element without a predetermined src is the task I have set for myself in JavaScript, specifically for a basic game of blackjack. Below is the current HTML code for the span of image boxes: Note: This site is not ...

javascripthtmlcss

Try implementing transform translate with absolute coordinates when positioning elements on a webpage

If I wanted to create a box that moves along with the mouse cursor, I could achieve that using the code below. document.addEventListener('mousemove', (e) => { document.documentElement.style.setProperty('--mouse-x', e.clientX ...

javascripthtmlcss

Kendo MVC Spreadsheet - Modifying cell text orientation to a 90-degree angle

My issue may seem trivial, but I'm struggling to achieve the desired behavior. Working with the Telerik MVC framework, my current task is to create a Spreadsheet that matches a specific template. However, in this template, there are cells in the head ...

csskendo-uiteleriktelerik-mvckendospreadsheet

Angular Material has support for displaying nested optgroups within select components

Upon reviewing a question on Stack Overflow, I learned that nested optgroups are not supported in the HTML5 spec. While it is possible to manually style them, I am curious if Angular Material offers a solution. Angular Material internally swaps many eleme ...

javascripthtmlcssangularjsangular-material

Can you reveal a table with the click of a button?

Hi there! I'm a newcomer to the world of Ruby on Rails and I’m currently working on creating a page that includes a date field. Once a specific date is selected, I’d like to generate a table displaying reports from that chosen date. controllers/r ...

htmlruby-on-railsmodel-view-controllerruby-on-rails-5