Solved

How can I makes this CSS tooltip "sticky?"

Posted on 2015-02-17
10
242 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

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
 

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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
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…

729 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