Menu
I want to load some content from a DIV tag as pop up text when i hover over an image. When i mouse leave from that image pop should disappear and when i again mouse over image content should show as pop up text. I am using HTML, Jquery, JS for this. It will be very useful if i get a solution using jquery load() method. Let me know ur response.
777
We now have our link. to add mouseover text, just use the "title" attribute, like so: <a href=" " title="This is some text I want to display. ">This link has mouseover text. </a> (see the next line to check this out in action.) This link has mouseover text.
A Hover text building block searches for a piece of text on the whole screen or part of the screen and then moves the mouse pointer to hover in the location where the text was found. Typically, this block is used for hovering on a button or a menu item.
A tooltip may refer to any of the following: 1. Alternatively known as a balloon, help balloon, flyover help, or ScreenTip, a Tooltip is a text description near an object. The tooltip is displayed when the user hovers the mouse cursor over the object.
To make a simple tooltip, we'll first create the HTML element that triggers the tooltip when hovered over. We'll create this element as a div and assign it the class hover-text. Next, we'll create the element for the tooltip itself. This will be a span element with the class tooltip-text.
Or, without javascript:
<div class="tooltip-wrap">
<img src="/some/image/file.jpg" alt="Some Image" />
<div class="tooltip-content">
<p>Here is some content for the tooltip</p>
</div>
</div>
And this CSS:
.tooltip-wrap {
position: relative;
}
.tooltip-wrap .tooltip-content {
display: none;
position: absolute;
bottom: 5%;
left: 5%;
right: 5%;
background-color: #fff;
padding: .5em;
}
.tooltip-wrap:hover .tooltip-content {
display: block;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
