In this article I will show you a super easy way to show a pop out window on hover. The image below shows how the pop out window looks like.
About Dilbert
To do this you need to download these to javascript libraries.
Once you download those to files, follow these two steps.
1> Create an HTMLfile with the content shown below
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript"
src="scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript"
src="scripts/jquery.qtip-1.0.0-rc3.min.js"></script>
<script type="text/javascript">
// This is the code you will modify to customize it
according to your needs
$(document).ready(function () {
$('#divHover').qtip({
content: '<strong>Bolded text pop
out<strong>',
position: {
corner: {
tooltip: 'leftBottom',
target: 'right'
}
},
style: {
tip: true, //
Apply a speech bubble tip to the tooltip at the designated tooltip corner
border: {
width: 0,
radius: 4
},
name: 'light', //this determines the font
width: 200,
height: 30,
textAlign: 'left'
}
});
});
</script>
</head>
<body>
<br />
<br />
<center>
<div id="divHover"
style="width: 100px;">
hover over me</div>
</center>
</body>
</html>
2> Wherever you create the html file, create a folder called scripts and put the files you downloaded above in there.
Now double click the html file and you should be able to see the text on hover.
No comments:
Post a Comment
Comments will appear once they have been approved by the moderator