Solved

How can I makes this CSS tooltip "sticky?"

Posted on 2015-02-17
10
181 Views
Last Modified: 2015-03-20
I've got a tooltip that's working great, but I want the user to be able to hover over it and click on a link.

How?

Here's a screenshot of what it looks like:

screenshot
Here's my HTML:

<div class="site_content">
	<div class="site_content_container">
		<div style="position:absolute; z-index:0; margin-left:1150px; margin-top:-20px; width:65px; height:68px;">
		<a class="tip_trigger" href="mailto:Nelson.DelValle@VerizonWireless.com">
		<IMG SRC="images/thumbs_up.png" border="0">
			<div class="tip">This application comes to you courtesy of <span id="link_text">Nelson Del Valle</span></a>.</div>
		</a>
		</div>
			<div style="height:370px; width:590px; background-color:#cccccc; display:inline-block; text-align:center;float:left;"><span><table border="1"><tr><td>hello</td></tr></table></span></div>
			<div style="width:11px; height:5px; background-color:#898989; display:inline-block; text-align:center;"></div>
			<div style="height:370px; width:590px; background-color:#b4b4b4; display:inline-block; text-align:center;"><span>graph #2</span></div>
			<div style="width:1200px; height:500px; background-color:#000000; color:#ffffff; margin-top:15px; text-align:center;"><span>graph #3</span></div>
			<div style="height:370px; width:590px; background-color:#cccccc; display:inline-block; text-align:center; margin-top:10px;"><span>graph #4</span></div>
			<div style="width:11px; height:5px; background-color:#898989; display:inline-block; text-align:center;"></div>
			<div style="height:370px; width:590px; background-color:#cccccc; display:inline-block; text-align:center; margin-top:10px;"><span>graph #5</span></div>
			<div style="height:370px; width:590px; background-color:#cccccc; display:inline-block; text-align:center; margin-top:10px;"><span>graph #6</span></div>
			<div style="width:11px; height:5px; background-color:#898989; display:inline-block; text-align:center;"></div>
			<div style="height:370px; width:590px; background-color:#cccccc; display:inline-block; text-align:center; margin-top:10px;"><span>graph #7</span></div>
		</div>
		<div class="footer"><br>&copy; Verizon Wireless | South Area | All Rights Reserved | <a href="http://southareanetwork.nss.vzwnet.com/contact.php" style="color:#ffffff; text-decoration:none;">Contact</a></div>
	</div>
</div>

Open in new window


...and here's my CSS:

a.tip_trigger {
text-decoration:none;
color:#000000;
background-color:#cccccc;
}

#link_text:hover {
text-decoration:underline;
}


.tip {
background-color:#ffffff;
width:300px;
border:1px solid black;
display:none; /*--Hides by default--*/
padding:10px;
position:relative;    
z-index:1000;
border-radius:6px;
-moz-border-radius:6px;
margin:auto;
color:#000000;
}

.tip a {
color:#000000;
text-decoration:underline;
}

Open in new window


What do I have to change to get the "masking" of the link to exceed the current boundaries so the tooltip stays visible?
0
Comment
Question by:brucegust
  • 6
  • 3
10 Comments
 
LVL 11

Assisted Solution

by:N R
N R earned 250 total points
ID: 40615737
Was going to take a look locally, but no tooltips are popping up, is there some jQuery you didn't include above?
0
 

Author Comment

by:brucegust
ID: 40616466
Morning, Nathan!

Here's my code for the actual tooltip:

<script type="text/javascript"> 
$(document).ready(function() {
	//Tooltips
	$(".tip_trigger").hover(function(){
		tip = $(this).find('.tip');
		tip.show(); //Show tooltip
	}, function() {
		tip.hide(); //Hide tooltip		  
	}).mousemove(function(e) {
		var mousex = e.pageX + 5; //Get X coodrinates
		var mousey = e.pageY + 5; //Get Y coordinates
		var tipWidth = tip.width(); //Find width of tooltip
		var tipHeight = tip.height(); //Find height of tooltip
		
		//Distance of element from the right edge of viewport
		var tipVisX = $(window).width() - (mousex + tipWidth);
		//Distance of element from the bottom of viewport
		var tipVisY = $(window).height() - (mousey + tipHeight);
		  
		if ( tipVisX < 5 ) { //If tooltip exceeds the X coordinate of viewport
			mousex = e.pageX - tipWidth - 5;
		} if ( tipVisY < 5 ) { //If tooltip exceeds the Y coordinate of viewport
			mousey = e.pageY - tipHeight - 5;
		} 
		tip.css({ top: mousey+px, left: mousex + px });
	});
});
</script>

Open in new window

0
 
LVL 11

Expert Comment

by:N R
ID: 40616499
Hmm..appears I still must be missing a included js file or something.
0
 

Author Comment

by:brucegust
ID: 40616736
How about this, Nathan! I built something very similar out at countryshowdown.com/download_campaign/vivian.php. Click on a playlist and then hover over "select this playlist" button and you'll see the same kind of tooltip that I'm using right now. It's pretty much the exact same thing with the exception of this "sticky" dynamic I'm trying to facilitate.

I can't think of any other files that you might need, but in case I've missed something, that site is a live version of the same tooltip I'm using now.

Thanks!
0
 
LVL 11

Expert Comment

by:N R
ID: 40616754
Ok, took a look at that site, tooltips are not showing up for me on their either.  Tried in Firefox and Chrome.
0
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 

Author Comment

by:brucegust
ID: 40616792
I'll bet you're looking at the wrong page, at least that's what I'm thinking since I can access the tooltip and I'm using IE.

Here's a screenshot:

screenshot
Here's the link again: https://countryshowdown.com/download_campaign/vivian.php
0
 
LVL 38

Accepted Solution

by:
Tom Beck earned 250 total points
ID: 40618591
The question is, when the tool tip is displayed, how can the hover area be increased so the tool tip does not disappear when the user moves the mouse up to click a link in the nav bar?

1.) The question involves a navigation menu and a tool tip trigger. But you have posted markup for the giant grid of boxes below the menu which have nothing to do with the question.

2.) The tool tip script was missing from the original post.

3.) Instead of correcting the original mistakes by providing the relevant markup and script to demonstrate the problem, you direct the experts to a page that has a similar tool tip yet does not present the same problem? The tool tip at that link is triggered by the button so the mouse is already on top of the button. In this question the tool tip is triggered by an image but you want it to remain visible when the user moves the mouse to a nav button. See the difference?

4.) This question is a follow up to this one: http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_28618714.html#a40615317. It would have been helpful to mention that.

5.) I see from the tool tip script posted here that you still have this line wrong: tip.css({ top: mousey+px, left: mousex + px }); despite the correction provided in the other question, so it's not even the right script.

You cannot expect the experts to jump through hoops to obtain a working, self contained sample of markup and code, relevant to the question, so they can work at a solution. You need to bring it with! (As we say in Philly.)
0
 

Author Comment

by:brucegust
ID: 40625845
Sorry guys for not getting back to you in a timely fashion and forgive me for not being more clear as far as my dilemma. I've been trying to get questions answered while simultaneoulsy trying to honor a deadline so I've not been monitoring Experts Exchange as frequently as I might otherwise.

As far as the substance of the question, if what I've provided thus far comes across as convoluted, then just brush all that aside and consider the tooltip that I built at https://countryshowdown.com/download_campaign/display.php?selected_playlist=Powerhouse Ladies.

In order to get to that, you'll first need to get beyond the validation sequence and you can do that by going out to https://countryshowdown.com/download_campaign/vivian.php. Once you get to the homepage, just click on any of the playlists. In this example, I've got "Power Ladies," but it doesn't matter. The thing that I wanted to provide with this page was a working example of the code that I'm currently using, the only difference being is that I want to the tool tip to remain in place so the user can hover over a link within that tooltip.

So, if this is the Javascript:

<script type="text/javascript"> 
$(document).ready(function() {
	//Tooltips
	$(".tip_trigger").hover(function(){
		tip = $(this).find('.tip');
		tip.show(); //Show tooltip
	}, function() {
		tip.hide(); //Hide tooltip		  
	}).mousemove(function(e) {
		var mousex = e.pageX + 20; //Get X coodrinates
		var mousey = e.pageY + 20; //Get Y coordinates
		var tipWidth = tip.width(); //Find width of tooltip
		var tipHeight = tip.height(); //Find height of tooltip
		
		//Distance of element from the right edge of viewport
		var tipVisX = $(window).width() - (mousex + tipWidth);
		//Distance of element from the bottom of viewport
		var tipVisY = $(window).height() - (mousey + tipHeight);
		  
		if ( tipVisX < 20 ) { //If tooltip exceeds the X coordinate of viewport
			mousex = e.pageX - tipWidth - 20;
		} if ( tipVisY < 20 ) { //If tooltip exceeds the Y coordinate of viewport
			mousey = e.pageY - tipHeight - 20;
		} 
		tip.css({  top: mousey, left: mousex });
	});
});
</script>

Open in new window


...this is my HTML:

	<a class="tip_trigger" href="download_execute.php"><IMG SRC="images/confirm_download_button.jpg" border="0"><span class="tip">
						<table width="300" height="100" bgcolor="white">
<tr>
<td>
Once you click on this button, you won't be able to return to this page. So, be sure of your selection before you proceed.
<P>
Due to file size, playlist may take several minutes to download.
</td>
</tr>
</table> 
						</span></a>

Open in new window


..and here's the applicable CSS:

.tip {

    background-color:#ffffff;
	filter:alpha(opacity=95);
	/* CSS3 standard */
	/*opacity:0.6;*/
	border:1px solid black;
    display:none; /*--Hides by default--*/
    padding:10px;
    position:absolute;    
	z-index:1000;
	text-decoration: none;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
 

Open in new window


What would have to change in order for the tooltip that has the "Once you click on this button, you won't be able to return to this page..." verbiage to remain in place so the user could conceivably click on link on that tool tip?

And Tom, to your point expressed in #5, I couldn't get your suggestion to work which is why I didn't pursue it.

Thanks for your time and expertise.
.tip {

    background-color:#ffffff;
	filter:alpha(opacity=95);
	/* CSS3 standard */
	/*opacity:0.6;*/
	border:1px solid black;
    display:none; /*--Hides by default--*/
    padding:10px;
    position:absolute;    
	z-index:1000;
	text-decoration: none;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
 

Open in new window

0
 

Author Comment

by:brucegust
ID: 40625859
Just for further clarification, if you go to https://countryshowdown.com/download_campaign/display.php?selected_playlist=Powerhouse , you'll be redirected to an index.php page that doesn't exist. Fret not. Use the https://countryshowdown.com/download_campaign/vivian.php and you'll get to the page that has all of the playlists displayed and you can click on any of those to get to the working tooltip.
<script type="text/javascript"> 
$(document).ready(function() {
	//Tooltips
	$(".tip_trigger").hover(function(){
		tip = $(this).find('.tip');
		tip.show(); //Show tooltip
	}, function() {
		tip.hide(); //Hide tooltip		  
	}).mousemove(function(e) {
		var mousex = e.pageX + 20; //Get X coodrinates
		var mousey = e.pageY + 20; //Get Y coordinates
		var tipWidth = tip.width(); //Find width of tooltip
		var tipHeight = tip.height(); //Find height of tooltip
		
		//Distance of element from the right edge of viewport
		var tipVisX = $(window).width() - (mousex + tipWidth);
		//Distance of element from the bottom of viewport
		var tipVisY = $(window).height() - (mousey + tipHeight);
		  
		if ( tipVisX < 20 ) { //If tooltip exceeds the X coordinate of viewport
			mousex = e.pageX - tipWidth - 20;
		} if ( tipVisY < 20 ) { //If tooltip exceeds the Y coordinate of viewport
			mousey = e.pageY - tipHeight - 20;
		} 
		tip.css({  top: mousey, left: mousex });
	});
});
</script>

Open in new window

	<a class="tip_trigger" href="download_execute.php"><IMG SRC="images/confirm_download_button.jpg" border="0"><span class="tip">
						<table width="300" height="100" bgcolor="white">
<tr>
<td>
Once you click on this button, you won't be able to return to this page. So, be sure of your selection before you proceed.
<P>
Due to file size, playlist may take several minutes to download.
</td>
</tr>
</table> 
						</span></a>

Open in new window

.tip {

    background-color:#ffffff;
	filter:alpha(opacity=95);
	/* CSS3 standard */
	/*opacity:0.6;*/
	border:1px solid black;
    display:none; /*--Hides by default--*/
    padding:10px;
    position:absolute;    
	z-index:1000;
	text-decoration: none;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
 

Open in new window

.tip {

    background-color:#ffffff;
	filter:alpha(opacity=95);
	/* CSS3 standard */
	/*opacity:0.6;*/
	border:1px solid black;
    display:none; /*--Hides by default--*/
    padding:10px;
    position:absolute;    
	z-index:1000;
	text-decoration: none;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
 

Open in new window

0
 

Author Comment

by:brucegust
ID: 40679309
Guys, I went in a different direction and was able to get things to function. Thanks for weighing in!
0

Featured Post

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Add code to body in wordpress site 8 37
Remove 'disabled' attribute 6 27
Element alignment and word wrapping 9 25
Gradient CSS 4 14
CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

758 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now