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

  • Question
  • Updated 3 years ago
  • Answered
I'm aware this can be done for navigation items, but would like to see that capability for non-navigation menu items. I think this would make my site more user-friendly by being able to provide a description of the hyperlink before they click it.

my site - www.studentathleteconnect.com
Photo of sharondmitchell

sharondmitchell

  • 8 Posts
  • 0 Reply Likes

Posted 3 years ago

  • 1
Photo of Shawn Holman

Shawn Holman

  • 486 Posts
  • 26 Reply Likes
This is possible. Please wait as I develop the script for this.

Best,
Shawn
Photo of sharondmitchell

sharondmitchell

  • 8 Posts
  • 0 Reply Likes
Hi Shawn,
thanks for responding. how soon will that be?
Photo of Shawn Holman

Shawn Holman

  • 486 Posts
  • 26 Reply Likes
Its already posted :)
Photo of Gop

Gop

  • 7364 Posts
  • 2074 Reply Likes
Hello Sharon,

Here's a nice roundup of tooltips in a Smashing Magazine article
Photo of Shawn Holman

Shawn Holman

  • 486 Posts
  • 26 Reply Likes
Gop,

Thats nice, but I know know if sharon knows how to use and install these.
Photo of sharondmitchell

sharondmitchell

  • 8 Posts
  • 0 Reply Likes
thanks all, I'll check into these tips and let you know how it goes.
Photo of Shawn Holman

Shawn Holman

  • 486 Posts
  • 26 Reply Likes
Sharon,

Do you like this:

http://jsfiddle.net/shawn31313/zvXAM/...

I will show you how to install it if you do like it.
Photo of sharondmitchell

sharondmitchell

  • 8 Posts
  • 0 Reply Likes
yes i need help installing it. thanks.
Photo of Shawn Holman

Shawn Holman

  • 486 Posts
  • 26 Reply Likes
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