Solved

How can I makes this CSS tooltip "sticky?"

Posted on 2015-02-17
10
235 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
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!

 

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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
tiny glitch in my main slider 3 57
How to resize a div in html 3 68
Need help fixing "Flash of Unstyled Content" problem with website 4 73
tiled banner 2 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…
When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

738 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