Solved

Why does this tooltip not work when it's at this part of the page?

Posted on 2015-02-17
6
209 Views
Last Modified: 2015-02-17
I want to position a tooltip within a div so I can specify where it shows up on the page.

In this first screen shot, you see my dilemma. It's the "thumbs up" graphic. When I hover over it, it doesn't work.

screenshot
Now, when I remove the "float:right" and margin-right settings on the page and the image shows up in the upper left hand corner. It's all good.

screenshot
What am I doing wrong that I can't get the toolip to happen when I position closer to the center of the page, or even in the extreme right hand part of the page. Ideally, I want it just to the left of the last link, but right now it doesn't work anywhere save in the upper left hand part of the page.

What am I doing wrong?

Here's my code:

HTML:

<!DOCTYPE html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>CSS Layout Test</title>
<link href="css/stylesheet.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<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, left: mousex });
	});
});
</script>
</head>

<body>



<div class="nav_bar">
	<div class="navcontainer">
		<ul>
		<li><a href="index.php" class="home"></a></li>
		<li><a href="#" class="regions"></a>
			<ul>
			<table class="regions" width="900">
				<tr>
					<td class="regions_header">Carolina / Tennessee</td>
					<td class="regions_header">Florida</td>
					<td class="regions_header">Georgia / Alabama</td>
					<td class="regions_header">Houston Gulf Coast</td>
					<td class="regions_header">South Central</td>
					<td class="regions_header">Central Texas</td>
				</tr>
				<tr>
					<td>
						<table class="regions_list">
							<tr>
								<td class="regions_list"><a href="http://vzwcarolinastennessee.com/" target="_blank" class="nav_menu_td">region news</a></td>
							</tr>
						</table>
					</td>
					<td>
						<table class="regions_list">
							<tr>
								<td class="regions_list"><a href="http://www.vzwflorida.com" target="_blank" class="nav_menu_td">region news</a></td>
							</tr>
						</table>
					</td>
					<td>
						<table class="regions_list">
							<tr>
								<td class="regions_list"><a href="http://www.vzwgeorgiaalabama.com" target="_blank" class="nav_menu_td">region news</a></td>
							</tr>
						</table>
					</td>
					<td>
						<table class="regions_list">
							<tr>
								<td class="regions_list"><a href="http://www.vzwhoustongulfcoast.com" target="_blank" class="nav_menu_td">region news</a></td>
							</tr>
						</table>
					</td>
					<td>
						<table class="regions_list">
							<tr>
								<td class="regions_list"><a href="http://www.vzwsouthcentral.com" target="_blank" class="nav_menu_td">region news</a></td>
							</tr>
						</table>
					</td>
					<td>
						<table class="regions_list">
							<tr>
								<td class="regions_list"><a href="http://www.vzwcentraltexas.com" target="_blank" class="nav_menu_td">region news</a></td>
							</tr>
						</table>
					</td>
				</tr>
			</table>					
			</ul>					
		</li>
		<li><a href="planning.php" class="planning"></a>
			<ul>
			<table class="regions" width="700">
				<tr>
					<td class="regions_header"><a href="" class="nav_menu_th">RF Planning</a></td>
					<td class="regions_header"><a href="" class="nav_menu_th">Data Planning</td>
					<td class="regions_header">Network Implementation</td>
					<td class="regions_header">Power and Ground</td>
					<td class="regions_header">Transport</td>
				</tr>
				<tr>
					<td>
						&nbsp;
					</td>
					<td>
					&nbsp;
					</td>
					<td>
						<table class="regions_list">
							<tr>
								<td class="regions_list"><a href="" class="nav_menu_td">Current Projects Update</a></td>
							</tr>
						</table>
					</td>
					<td>
						<table class="regions_list">
							<tr>
								<td class="regions_list"><a href="" class="nav_menu_td">Team Website</a></td>
							</tr>
						</table>
					</td>
					<td>
						<table class="regions_list">
							<tr>
								<td class="regions_list"><a href="http://soareatransportreporting.south.vzwcorp.com/Default.aspx" class="nav_menu_td" target="_blank">Area Reports</a></td>
							</tr>
						</table>
					</td>
				</tr>
			</table>					
			</ul>	
		</li>
		<li><a href="budget_reports.php" class="budget"></a>
			<ul style="margin-left:-300px;">
			<table class="regions">
				<tr>
					<td class="regions_header">Tools & Reporting</td>
					<td class="regions_header">Financial Planning & Analysis</td>
					<td class="regions_header" style="width:100px;">Inventory</th>
					<td class="regions_header">Real Estate</td>
					<td class="regions_header">Compliance</td>
					<td class="regions_header">Code Administration</td>
				</tr>
				<tr>
					<td>
						<table class="regions_list">
							<tr>
								<td class="regions_list"><a href="" class="nav_menu_td">Current Development Project List</a></td>
							</tr>
							<tr>
								<td class="regions_list"><a href="http://southareanetwork.nss.vzwnet.com/project_request.php" class="nav_menu_td">New Development Project Request</a></td>
							</tr>
							<tr>
								<td class="regions_list"><a href="" class="nav_menu_td">NSS Application Summary</a></td>
							</tr>
							<tr>
								<td class="regions_list"><a href="https://portal.vh.vzwnet.com/aeportal/" class="nav_menu_td" target="_blank">NSS Portal</a></td>
							</tr>
							<tr>
								<td class="regions_list"><a href="http://stakeholder.south.vzwcorp.com/" class="nav_menu_td">360 Survey Tool</a></td>
							</tr>
						</table>
					</td>
					<td>
						<table class="regions_list">
								<tr>
								<td class="regions_list"><a href="http://budgettools.south.vzwcorp.com/default.aspx?aid=1&bpid=" class="nav_menu_td" target="_blank">Capital Budget Tool</a></td>
							</tr>
							<tr>
								<td class="regions_list"><a href="http://expensebudgettool.south.vzwcorp.com/default.aspx" class="nav_menu_td" target="_blank">Expense Budget Tool</a></td>
							</tr>
							<tr>
								<td class="regions_list"><a href="http://netadmin.nss.vzwnet.com/asset-management/cip-dashboard/" target="_blank" class="nav_menu_td">CIP Dashboard</a></td>
							</tr>
						</table>
					</td>
					<td>
						<table class="regions_list">
							<tr>
								<td class="regions_list" style="width:100px;"><a href="http://txslsaiapw1v.nss.vzwnet.com/" class="nav_menu_td" target="_blank">Inventory Tool</a></td>
							</tr>
						</table>
					</td>
					<td>
						<table class="regions_list">
							<tr>
								<td class="regions_list" style="width:100px;"><a href="http://sarrealestatetracker.south.vzwcorp.com/Default.aspx" class="nav_menu_td" target="_blank">Real Estate Tracker</a></td>
							</tr>
						</table>
					</td>
					<td>
						<table class="regions_list">
							<tr>
								<td class="regions_list"><a href="http://10.215.213.203/c2/vzwcompreg/content.nsf/lookup.htmlpages/mainframe.html?open" class="nav_menu_td" target="_blank">Network Compliance and Regulatory</a></td>
							</tr>
						</table>
					</td>
					<td>
						<table class="regions_list">
							<tr>
								<td class="regions_list"><a href="" class="nav_menu_td">Team Members</a></td>
							</tr>
							<tr>
								<td class="regions_list"><a href="" class="nav_menu_td">File Library</a></td>
							</tr>
							<tr>
								<td class="regions_list"><a href="http://txslcarxpa1v.nss.vzwnet.com/CARRIE/eng/Lerg/index.cfm" class="nav_menu_td" target="_blank">CARRIE</a></td>
							</tr>
						</table>
					</td>
				</tr>
			</table>					
			</ul>	
		</li>
		<li><a href="" class="system_perf"></a>
			<ul class="tool_list">
				<table class="regions" width="150">
					<tr>
						<td class="regions_header"><a href="http://sasysperf/index.php" target="_blank" class="nav_menu_th">Area System Performance</td>
					</tr>
					<tr>
						<td>
							<table class="regions_list">
								<tr>
									<td class="regions_list"><a href=""class="nav_menu_td">Reporting Website</a></td>
								</tr>
								<tr>
									<td class="regions_list"><a href="http://saportal.south.vzwcorp.com/LTEOffload/Index"class="nav_menu_td" target="_blank">LTE Offload Tool</a></td>
								</tr>
								<tr>
									<td class="regions_list"><a href="https://cloudsites.vzbi.com/sites/SAMonthlyReporting/_layouts/15/start.aspx#/SitePages/Home.aspx "class="nav_menu_td" target="_blank">Monthly Reporting Sharepoint</a></td>
								</tr>
							</table>
						</td>
					</tr>
					<tr>
				</table>
			</ul>
		</li>
		<li><a href="network_ops.php" class="network_ops"></a>
			<ul class="tool_list">
				<table class="regions" width="200">
					<tr>
						<td class="regions_header">Network Operations</td>
					</tr>
					<tr>
						<td>
							<table class="regions_list">
								<tr>
									<td class="regions_list"><a href="http://txsltwp1v.nss.vzwnet.com/translations/" class="nav_menu_td" target="_blank">Translations Website</a></td>
								</tr>
							</table>
						</td>
					</tr>
				</table>
			</ul>
		</li>
		<li><a href="reference.php" class="reference"></a>
			<ul class="tool_list">
				<table class="regions" width="150">
					<tr>
						<td class="regions_header">Organization</td>
						<td class="regions_header">Systems</td>
					</tr>
					<tr>
						<td>
							<table class="regions_list">
								<tr>
									<td class="regions_list"><a href="faq_list.php" class="nav_menu_td">FAQs</a></td>
								</tr>
								<tr>
									<td class="regions_list"><a href="" class="nav_menu_td">Acronymns</a></td>
								</tr>
							</table>
						</td>
						<td>
							<table class="regions_list">
								<tr>
									<td class="regions_list"><a href=""class="nav_menu_td">File Library</a></td>
								</tr>
							</table>
						</td>
					</tr>
				</table>
			</ul>	
		</li>
		<li><a href="exec_reports.php" class="reports"></a>
			<ul class="tool_list">
				<table class="regions">
					<tr>
						<td class="regions_header">Finanical Planning and Analysis</td>
					</tr>
					<tr>
						<td>
							<table class="regions_list">
								<tr>
									<td><a herf="http://netadmin.nss.vzwnet.com/asset-management/cip-dashboard/" target="_blank" class="nav_menu_id">CIP Dashboard</a></td>
								</tr>
							</table>
						</td>
					</tr>
				</table>
			</ul>
		</li>
		</ul>
	</div>
</div>
<div style="position:relative;1000px; z-index:20;">
<a class="tip_trigger" href="">
<IMG SRC="images/thumbs_up.png" border="0">
	<span class="tip">
	This application comes to you courtesy of Nelson DelValle.
	</span>
</a>
</div>
<div class="content">

	
</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></body></html>

Open in new window


CSS:

html { 
  height: 100%;
}

body {
margin:0;
  font-family: Helvetica, Microsoft Sans Serif;
  font-size: 11pt;
}

.nav_bar {
position:relative;
margin-top:0px;
background-image:url(../../images/nav_bar_background.png);
height:29px;
width:100%;
min-width:1300px;
background-repeat:repeat-x;
z-index:5;
}

.navcontainer {
margin:auto;
width:1300px;
height:29px;
position:relative;
z-index:6;
}

.navcontainer ul {
position: absolute;
padding:0;
margin: 0px;
list-style-type:none;

}

/*here's my list characteristics as far how things are displayed and how they're "floated" */
.navcontainer ul li {
position: relative;
display: block;
float: left;
margin-left:35px;
z-index:10;
}

.navcontainer ul li a {
text-decoration: none;
display: block;
padding-right: 0px;
}

/* this command tells my li's within the first tier of ul's to bust out with a pulldown menu */
.navcontainer ul li:hover > ul 
{
display: block;
}

/* now we're getting jiggy with it by establishing the rules for the actual pulldown menu */
.navcontainer ul ul {
display: none;
background: none;
margin-top: 0px;
padding-top: 0;
position: absolute;
background: rgba(204,204,204, .7);
border-style:solid;
border-width: thin;
border-color:#cccccc;
line-height:35px;
height:auto;
z-index:100;
border-radius:6px;
-moz-border-radius:6px;
}

.navcontainer ul ul li {
float:none;
margin:0px;
padding:0;
}

.navcontainer ul ul li a {
display: block;
float:none;
margin: 0 0 0 10px;
padding: 0;
font-family: Helvetica, Microsoft Sans Serif;
font-size: 18px;
padding-left:0px;
z-index:10;
}	

.navcontainer ul ul li:hover > ul 
{
display: block;
}

.navcontainer ul ul li:hover {
display:block;
}

.navcontainer:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}

a.home {
display:inline-block; /**** important ****/
margin-top:5px;
width:39px;
height:12px;
background-image:url(../../images/button_home.png);
background-repeat:no-repeat;
}

a.regions {
display:inline-block; /**** important ****/
margin-top:5px;
margin-left:25px;
width:51px;
height:29px;
background-image:url(../../images/button_regions.png);
background-repeat:no-repeat;
}

a.planning {
display:inline-block; /**** important ****/
margin-top:5px;
margin-left:25px;
width:58px;
height:29px;
background-image:url(../../images/button_planning.png);
background-repeat:no-repeat;
}

a.budget {
display:inline-block;
margin-top:5px;
margin-left:25px;
width:189px;
height:29px;
background-image:url(../../images/button_budget.png);
background-repeat:no-repeat;
}

a.system_perf {
display:inline-block; /**** important ****/
margin-top:5px;
margin-left:25px;
width:150px;
height:29px;
background-image:url(../../images/button_system_perf.png);
background-repeat:no-repeat;
}

a.network_ops {
display:inline-block; /**** important ****/
margin-top:5px;
margin-left:25px;
width:132px;
height:29px;
background-image:url(../../images/button_network_ops.png);
background-repeat:no-repeat;
}

a.reference {
display:inline-block; /**** important ****/
margin-top:5px;
margin-left:25px;
width:66px;
height:29px;
background-image:url(../../images/button_reference.png);
background-repeat:no-repeat;
}

a.reports {
display:inline-block; /**** important ****/
margin-top:5px;
margin-left:25px;
width:120px;
height:29px;
background-image:url(../../images/button_reports.png);
background-repeat:no-repeat;
}

a.footer_link {
color:white;
text-decoration:none;
}

table.csv_sample {
 box-shadow: 7px 7px 15px #e9e9e9;
 border-collapse:separate;
border-radius:6px;
-moz-border-radius:6px;
 margin:auto;
 width:auto;
border: 1px solid #d7d4d4;
 }
 
 table.page_display {
 box-shadow: 7px 7px 15px #e9e9e9;
 border-collapse:separate;
border-radius:6px;
-moz-border-radius:6px;
 margin:auto;
 width:650px;
border: 1px solid #d7d4d4;
 }
 
 td.csv_sample {
padding:5px;
border: 1px solid grey;
 text-align:center;
 background-color:#cccccc;
 }
 
  td.csv_sample_black {
padding:5px;
border: 1px solid grey;
 text-align:center;
 background-color:#000000;
 color:#ffffff;
 font-weight:bold;
 }
 
 td.csv_sample_cell {
padding:5px;
border-collapse: collapse;
border: 1px solid grey;
 }
 
 td.title {
 text-align:right;
 }
 
 table.regions {
border:none;
 margin:auto;
 }
 
 table.regions th {
 border: 1px solid #ffffff;
 background-color:#282828;
 height:20px;
 line-height:20px;
 text-align:center;
 font-weight:normal;
 color:#ffffff;
 width:auto;
 }
 
  table.regions td.regions_header {
 border: 1px solid #ffffff;
 background-color:#282828;
 height:20px;
 line-height:20px;
 text-align:center;
 font-weight:normal;
 color:#ffffff;
 white-space:nowrap;
 }
 
 
 table.regions td {
 line-height:20px;
 text-align:center;
 vertical-align:top;
 width:300px;
 height:20px;
 white-space:nowrap;
 }
 
 table.regions_list {
 border-radius:6px;
-moz-border-radius:6px;
background-color:#ffffff;
 border: 1px solid #cccccc;
 }
 
 table.regions_list td {
 text-align:left;
 line-height:20px;
 height:20px;
 }
 
 a.nav_menu_th {
text-decoration:none;
color:#ffffff;
}
a.nav_menu_th:hover {
text-decoration:underline;
color:#ffffff;
}

a.nav_menu_th:visited {
text-decoration:none;
color:#ffffff;
}

a.nav_menu_td {
text-decoration:none;
color:#000000;
}
a.nav_menu_td:hover {
text-decoration:underline;
color:#000000;
}

a.nav_menu_td:visited {
text-decoration:none;
color:#000000;
}

.footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 30px;
background-image:url(../../images/footer.jpg);
background-repeat:repeat-x;
font-size:9pt;
color:#ffffff;
text-align:center;
}

a.footer_link {
color:white;
text-decoration:none;
}

.content {
 width:1200px;
 margin:auto;
 margin-top:25px;
 margin-bottom:35px;
 height:100%;
 background-color:#454545;

}

span {
position: relative;
top: 50%;
transform: translateY(-50%);
}


.tip {
background-color:#ffffff;
filter:alpha(opacity=95);
display:none; /*--Hides by default--*/
padding:10px;
position:absolute;    
z-index:1000;
text-decoration: none;
background-color:#ffffff; 
border: 1px solid #cccccc;
color:#000000;
box-shadow: 7px 7px 15px #e9e9e9;
border-radius:6px;
-moz-border-radius:6px;
margin:auto;
width:300px;
height:45px;
border: 1px solid #d7d4d4;
}

Open in new window

0
Comment
Question by:brucegust
  • 3
  • 3
6 Comments
 
LVL 38

Expert Comment

by:Tom Beck
ID: 40615176
This is invalid css: position:relative;1000px;, but that's not the issue.

You are positioning the tip absolute to it's parent container which is positioned relative.
<div style="position:relative;1000px; z-index:20;">

The tip is showing, it's just off the page when you move the tip trigger anywhere past the center of the browser window.

Allow the tip to be positioned absolute to the browser window instead, based on the mouse position determined by your script. In other words, remove position:relative from the tip trigger's parent div.

You also need to specify 'px' in your repositioning (last line of your script).

tip.css({  top: mousey + 'px', left: mousex + 'px' });
0
 

Author Comment

by:brucegust
ID: 40615242
Tom!

Cleaned up the invalid CSS and I see what you're talking about as far as the tooltip is showing, it's just off the screen. My question, though, is that the parent div to the tooltip is the body, is it not?

And then as far as specifying the "px" in the tooltip, I did this:

<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 + 10px, left: mousex + 10px });
      });
});
</script>

...and it quit running altogether, so I'm obviuosly doing something wrong there.

What's the parent div that I need to change and how do I make the edits on mousey and mousex correctly?
0
 
LVL 38

Accepted Solution

by:
Tom Beck earned 500 total points
ID: 40615317
Add the 'px' to the integer value so to make the final value a string ending with 'px'.

tip.css({  top: (mousey + 10) + 'px', left: (mousex + 10) + 'px' });

The way you had the markup...

<div style="position:relative;1000px; z-index:20;">
<a class="tip_trigger" href="">
<IMG SRC="images/thumbs_up.png" border="0">
      <span class="tip">
      This application comes to you courtesy of Nelson DelValle.
      </span>
</a>
</div>

... the 'tip' is a child of 'tip-trigger' which is a child of the containing div.

An element with css position set to absolute (the 'tip') or relative (the containing div) will be positioned relative to the nearest parent with css position set to anything other than static. If all the way up the element hierarchy there are no parent elements with css position set then position will be relative to the browser window.

Since you are checking the mouse position relative to the browser window, you want the tip displayed relative to the browser window as well. So, make sure the tip has no parent with position set to relative or absolute.
0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 

Author Comment

by:brucegust
ID: 40615487
Ohhhh...

Got it!

Thanks, Tom!

If you're so inclined, I've got another question about how to keep that same tooltip "sticky." It's at http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_28618880.html

Thanks, again!
0
 

Author Closing Comment

by:brucegust
ID: 40615488
Outstanding!
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 40615722
Thanks for the points.

I looked at the other question but it's not making sense to me and I'm already familiar with this question. The position of the tip is off the screen again because you have the parent div positioned absolute. Other experts will be scratching their heads because you did not include the script. Without the nav menu, the tip_trigger is above the top of the browser window at -22px.
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Suggested Solutions

"I want to put my photos online, but I don't want them stolen.  What settings should I use?" When You Put Photos Online First and foremost, any digital file published on the WWW can be copied, stored, modified, retransmitted, etc.  Remember Naps…
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…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

743 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

11 Experts available now in Live!

Get 1:1 Help Now