Textbox on mouse hover

Question

I've looked everywhere trying to find a basic textbox on-mouse-hover that sits either on the left or right of the image. Nothing fancy just background color in a rectangle box that sits above all other images.

I've tried the 'Title' tag in HTML but it is too slow. So need something more responsive and editable. Needs to appear on hover and then disappear. Would be nice to have a mouse cursor that appears too when hovering over the image.

Answer 1

You can use a pseudo element that uses the title attribute as content.

.image {
    position: relative;
}
    
.image:hover:after {
    position: absolute;
    content: attr(title);
    display: inline-block;
    left: 0px;
    top: 0px;
    padding: 5px;
    background-color: black;
    color: white;
}

<div class="image" title="I Show up on Hover">
    <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"> 
</div>

Answer 2

HTML has an "onmouseenter" event.

<div onhover="box()"></div>

You can use this to activate javascript, which then displays a div or a span with a relative position, but you'll have to flex a few CSS muscles there.

Answer 3

Here's a solution using mouseover to show a text input, which is hidden again once the user changes the input's value. Some of the CSS I used is a bit hacky to make the example prettier, but bits that matter for functionality are:

#container has position: relative; (This lets children be absolutely positioned inside)
#myImg has float: left; (and its width property is defined and not too wide)
#textContainer has position: absolute; display: none; (and its left property equals the width of #myImg)
#more-content-to-right has float: left (and its width property is defined and not too wide)
#more-content-below has clear: both

In production, I'd get rid of the borders and use more robust techniques for "prettification".

function showTextContainer(){
  document.getElementById("textContainer").style.display = "block";
}
function hideTextContainer(){
  document.getElementById("textContainer").style.display = "none";
}

#container { position: relative; width: 530px; margin: 0 0; padding: 2px; }
#myImg { height: 100px; width: 200px; float: left; }
#textContainer { position: absolute; left: 200px; top: 50px; height: 1.3em; width: 200px; display: none; }
#textbox {width: 98%; }
#more-content-to-right { float: left; height: 100px; width: 300px; }
#more-content-below { clear: both; height: 100px; width: 508px; }
.bordered { border: 1px solid gray; margin: 3px;}

<div id="container" class="bordered">container<br/>
  <div id="myImg" class="bordered" onmouseover="showTextContainer()">img</div>
  <div id="textContainer" class="bordered">
    <input id="textbox" placeholder="type stuff here" onchange="hideTextContainer()" />
  </div>
  <div id="more-content-to-right" class="bordered">more content to right</div>
  <div id="more-content-below" class="bordered">more content below</div>
</div>