How do I create a mouse/hover over for my own hyperlinks in my pages? .

Edit Subject

Add this code on the top of every web page you want this to work:


<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<style type='text/css'>
.tipsy-box {
display:none;
color:black;
background-color:#EDEDED;
border:2px solid #666666;
font-size:11px;
line-height:1.3em;
padding:6px;
position:absolute;
width:100px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-moz-box-shadow:0 0 5px #888888;
-webkit-box-shadow:0 0 5px #888888;
opacity:0.8
}
.chat-bubble-arrow-border {
border-color: #666666 transparent transparent transparent;
border-style: solid;
border-width: 10px;
height:0;
width:0;
position:absolute;
bottom:-22px;
left:30px;
}
.chat-bubble-arrow {
border-color: #EDEDED transparent transparent transparent;
border-style: solid;
border-width: 10px;
height:0;
width:0;
position:absolute;
bottom:-19px;
left:30px;
}
</style>
<script type='text/javascript'>
$(window).load(function () {
$('a').each(function (i) {
var words = $(this).attr('data-tooltip'),
app = '<div class="tipsy-box tipsy-box' + i + '">' + words + '<div class="chat-bubble-arrow-border"></div><div class="chat-bubble-arrow"></div></div>';
$(this).hover(function () {
$(this).css('position', 'relative').append(app);
var change = words.length > 20 ? -50 : -38;
$(".tipsy-box" + i + "").css({
left: $(this).width() / 2 - 20,
top: ($('#tipsy-box').height() * -1) + change
}).fadeIn();
}, function () {
$(".tipsy-box" + i + "").fadeOut(1000);
setTimeout(function () {
$(".tipsy-box" + i + "").remove();
}, 1000);
});
});
});
</script>


This is all you need. Remember to add this code in an HTML tag.

Now, where ever you want a popup you will need to use HTML.

1. Drag HTML tag where you want the link to be.
2. Add this HTML:


<a href="LINK WHEN CLICKED" data-tooltip="WHAT YOU WANT TO POPUP">WORDS TO BE CLICKED</a>


3. Hit save

If you have any issues or questions. Then, dont be shy. :) Ask.

Best Regards,
Shawn