English
Sign in / Sign up

Responsive AJAX Tooltip / Hoverbox Script

An easy to use ajax tooltip / pop-up box script, which provides additional information when the user hovers the cursor over an item, without clicking it. It is a small "Hoverbox" with information about the item being hovered over.

Features

  • Fully customizable tooltip. You can further modify the background color/width of individual tooltips.
  • Hoverbox content can include images, images with text, and a caption as well as other rich HTML.
  • The pop-up is generally used for providing an interface between pointer and push button.
  • Supports all modern browsers.
  • It is a responsive, mobile friendly tooltip script.

Preview

Try moving your mouse over this button/link to see an Ajax tooltip


Downloads

Copy and Paste the below codes in to your webpage to make use of this pop-up/hoverbox ajax script.

CSS CODE:


<style type = "text/css">
#bubble_tooltip
{

width:210px;
position:absolute;
display: none;
}
#bubble_tooltip .bubble_top
{
position:relative;
background-image: url(htooltip/bubble_top.gif);
background-repeat:no-repeat;
height:18px;
}
#bubble_tooltip .bubble_middle
{
position:relative;
background-image: url(htooltip/bubble_middle.gif);
background-repeat: repeat-y;
background-position: bottom left;
}
#bubble_tooltip .bubble_middle div
{

padding-left: 12px;
padding-right: 20px;
position:relative;
font-size: 11px;
font-family: arial, verdana, san-serif;
text-decoration: none;
color: red;


text-align:justify;
}
#bubble_tooltip .bubble_bottom
{
background-image: url(htooltip/bubble_bottom.gif);
background-repeat:no-repeat;
height:65px;
position:relative;
top: 0px;
}

#b1
{
margin-left:40%;
background: none repeat scroll 0 0 #468CD2;
border-bottom: 3px solid #3277BC;
text-shadow: 1px 1px 0 #214D73;
border-radius: 0.4em;
color: #FFFFFF;
cursor: pointer;
font-weight: bold;
padding: 7px 14px;
}
#resp
{
margin-left:40%;
}@media only screen and (max-width:480px) {#b1{margin-left:5%;}#resp{margin-left:10%;}}</style>

<script type="text/javascript" src="htooltip/ajax.js"></script>

<!-- Script by hscripts.com -->




HTML Code:


<!-- Script by hscripts.com -->

<p align='center'><b>Responsive AJAX Tooltip / Hoverbox Script</b></p>
<div id='maindiv'>
<table id="bubble_tooltip" align=center border=0 cellpadding=0 cellspacing=0>
<tr class="bubble_top"><td></td></tr>
<tr class="bubble_middle"><td><div id="bubble_tooltip_content"></div></td></tr>
<tr class="bubble_bottom"><td colspan=5></td></tr>

</table>
<br><br><br> <center>Just move your mouse cursor over the button or image.</center><br><br><br>

<input type="button" id="b1" value="BUTTON" style='cursor:pointer;'
onmouseover="showToolTip('htooltip/tooltip1.html','bubble_tooltip_content',event)" onmouseout="hideToolTip()"></input>


<br><br><br>
<a id='resp' href="#"onmouseover="showToolTip('htooltip/tooltip2.html','bubble_tooltip_content',event)" onmouseout="hideToolTip()"> LINK </a>

<div align=center style='font-size: 10px; color: #dadada;' id="dumdiv">

<a href="//www.hscripts.com" id="dum" style='text-decoration:none; color: #dadada;'>&copy; hscripts.com</a>

</div>

</div>

<!-- Script by hscripts.com -->


Usage

  • Download htooltip.zip and unzip the files.
  • Copy and paste the CSS code and HTML code one below the other in the editor file.
  • Save the file in .php extension
  • Note: Save the php file in the same destination folder where you saved the htooltip folder. But don't save the php file inside the htooltip folder.
  • The file contains the images used in this tooltip script. Include the following lines in your code to make use of the images.
    • pic1.src='htooltip/bubble_top.gif'; 
pic2.src='htooltip/bubble_middle.gif';
pic3.src='htooltip/bubble_bottom.gif';
  • You can change the message on hoverbox using tooltip1.html and tooltip2.html files.
    • Html content 
    <input type="button" id="b1" value="Button" onmouseover="showToolTip('htooltip/tooltip1.html','bubble_tooltip_content',event)" onmouseout="hideToolTip()">
    <a href="#" onmouseover="showToolTip(htooltip/tooltip2.html,'bubble_tooltip_content',event)" onmouseout="hideToolTip()">LINK</a>
  • Your message is passed as argument for the javascript function showtooltip('tooltip1.html','bubble_tooltip_content',event)
  • Upon pointing the cursor over the button or link, the function showtooltip('tooltip2.html','bubble_tooltip_content',event) is triggered and the pop-up box gets displayed.

License

Other Scripts

Free Ajax Scripts


Ask Questions

Ask Question