|
HTML - Tooltip Issue
Hi,
I have a button which i would like a tooltip to appear when the users hovers over it, but i having a bit of trouble getting it in the correct place for it pop up! heres my Button Code HTML Code: <a href="RaiseTask.aspx" style="margin-right:15px;" class="MainPageButton">Ops Support</a> Heres my Tool tip CSS HTML Code: a.tooltip span {
display:none;
margin-left:-50px;
margin-top:0px;
width:400px;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
font-size: 24px;
font-weight: normal;
line-height: 26px;
background-color: #ffffff;
}
a.tooltip:hover span{
display:inline;
position:absolute;
color:#34ad01;
border:2px solid #3ABF37;
}
Can some one please tell me how to achieve the pop up im actually pulling my hair out Thanks in advance. Similar Tutorialshttp://testingbar.atspace.com/index-test.htm When clicking within the yellow highlighted parts of the calendar, a tooltip pop ups to the right. But I also want a smaller tooltip that appears when you mouseover the yellow areas in the calendar. That tooltip will only include the title (bold uppermost row) from the part when you click on the event. That tooltip should have 1px border width, 4px padding and the same green background color as the more detailed tooltip. Can someone help me with this? Hi, I am new to html hence I need the help. ok I have several links for other pages. When the mouse hovers over a link a small description is displayed on the webpage, where ever I want but probably at the bottom of the page. Similar to a tooltip but actually located on the webpage rather than floating next to the arrow. thanks I have a tooltip script for the product pages on my website. Here's an example (put your mouse over the 2 small pictures near the bottom of the page): http://www.ivoog.com/scooters/milan The problem is, as you can see, the tooltip thats shows ups blinks rapidly when your mouse is over the tooltip (it should display under or over, but sometimes the mouse goes over it). I know I should have found this before, and am now paying for it. How can I stop the tooltips from blinking when your mouse is over the pictures and the tooltips? Please help! Here's the CSS: http://www.pics.ivoog.com/page/tooltip.css Here's the javascript: http://www.pics.ivoog.com/page/htmltooltip.js What can I change? Thanks so much! I have a drop down box of a fixed width. That drop down box needs to contain some values that are longer than the desired width. I'm happy for those values to be truncated, but I would like to display the full text in a tooltip (one that I could format to be a multi-lined one) as the option is hovered over (not after you select an option). Does anyone know if there's an event that's generated when scrolling through the options of a drop down box? Hi All, I have a tool Tip which will be shown when a user hovers over a mouse but for some reason the information i have entered gets hidden behind the below button, See the attached Picture, ignour the white lines there not actually on the button something went wrong when i done a screen print Heres the HTML and CSS HTML HTML Code: <div class="MainPageContainer">
<a href="RaiseTaskOperations.aspx" style="margin-right: 15px;" class="MainPageButton">
Ops Support<span class="tooltip">For Raising<br />
Computer Issues<br />
Software Issues<br />
Account Issues<br />
Telephone Issues<br />
Email Issues<br />
</span></a><a href="RaiseTaskSupport.aspx" class="MainPageButton">Support<span class="tooltip">For
Raising<br />
Stuck in batch<br />
Locked in a screen<br />
</span></a>
<div class="SmallSpace">
</div>
<a href="RaiseTaskFix.aspx" style="margin-right: 15px;" class="MainPageButton">Fix<span
class="tooltip">For Raising<br />
Rating Error<br />
Data not mapping correctly<br />
</span></a><a href="RaiseTaskChange.aspx" class="MainPageButton">Change<span class="tooltip">For
Raising<br />
New field required<br />
New report required<br />
Amend how we store this data<br />
</span></a>
</div>
CSS HTML Code: .MainPageButton
{
filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr='#d4003d', endColorstr='#990034');
-moz-box-shadow:inset 0px 1px 16px 0px #ffffff;
-webkit-box-shadow:inset 0px 1px 16px 0px #ffffff;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #8f002b), color-stop(1, #b20939) );
background:-moz-linear-gradient( center top, #8f002b 5%, #b20939 100% );
background-color:#8f002b;
-moz-border-radius:19px;
-webkit-border-radius:19px;
border:2px solid #dcdcdc;
display:inline-block;
width:130px;
text-align: center;
color: White;
font-family:arial;
font-size:21px;
font-weight:bold;
padding:17px 48px;
text-decoration:none;
position:relative;
}
.MainPageButton:hover span
{
display:block;
}
.MainPageButton span
{
display:none;
position:absolute;
top:10px;
left:40px;
width:150px;
border:1px solid black;
background-color:#f7f5ea;
-moz-border-radius:10px;
-webkit-border-radius:10px;
font-size: 13px;
color:Gray;
}
.MainPageButton:hover
{
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #b20939), color-stop(1, #8f002b) );
background:-moz-linear-gradient( center top, #b20939 5%, #8f002b 100% );
background-color:#b20939;
}
.MainPageButton:active
{
position:relative;
}
This tool tip will vary in size as time goes on so can some one help me resolve this so i wont have to worry about it later on down the line. Hi All, Is there any maximum length for tooltip for html tags? How can I determine the possible max length? Rahul.... Can somebody please give me the HTML for making these tips pop up when the mouse hovers over an image or over some text? Hey there! I am working on an xml browsing thingie that looks a bit like this: Code: ----------------------------------------------------------------- | Head | ----------------------------------------------------------------- | | | | | | | | | | | | | menu | content | | | | | | | | | | ----------------------------------------------------------------- So far, everthing works as intended. Then, I added a JavaScript that shows a tooltip when hovering over the menu-entries - working fine in FireFox, but broken in IE. The strange problem: The tooltip is behind the menu, but in front of the content! I think that this has to do with 1 of 2 things (or both): IE being unable to interpret z-indizes and the needed file/div structure, which looks as follows (leaving out most style information) Code: --- index.htm ---
<html>
<head>
</head>
<body>
<div id="ToolTip"></div>
<iframe src="oldindex.htm"></iframe>
</body>
</html>
--- oldindex.htm ---
<html>
<head>
</head>
<body>
<frameset id="MainFrame" name="MainFrame">
<frame id="TopFrame" src="topframe.htm"></frame>
<frameset id="ContentFrame" name="ContentFrame" cols="25%, 75%">
<frame id="menu" name="content" src="mymenu.xml">
<frame id="content" name="content" src="mycontent.xml">
</frameset>
</frameset>
</body>
</html>
Normally, I would add the <div> within the menu-frame.xml, but then it would be within that frame ONLY (resizing it) - so I had to create the div and the iframe before that (the div gets filled and shown/hidden dynamically by the javascript). This way, the div is "global" and should be shown completely - but in fact, in IE7 it's the other way around: the rest of the tooltip is seen on the right content frame, but behind the menu frame. I tried a few workarounds, but none worked for me Any suggestions, probably? Huge thanks in advance, Martin Hi, Im trying to work out how to create a tool tip for mouse over of one of my buttons. Can someone help me please? My Html Button is here HTML Code: <a href="RaiseTaskChange.aspx" class="MainPageButton">Change</a> Please help me. Regards I am making a website he http://musicalmadness.zymichost.com/index.htm In the links on the left there is a page called "Solo Albums" - this is the page I'm having trouble with. As you can see, I've made tooltips over the images listing the tracks of the albums. I've decided to make them position underneath the image. However, when they are activated they are shifting the entire page around. Is there a way to make it so they simply appear OVERLAYING the rest of the page? PLEASE look at CSS. Thank you! Hi guyz, i have a query Mouse over the datagrid cell display tooltip or panel to display information but only using HTML and CSS not using javascript. can anyone help me. because im gonna use it on htmleditor on c# desktop application thax before im having an issue with this code im trying to get going in my css file... i put in the code below in the .css file and call the file in hte header using the link to my css file and then i use the command that should activate the script im wondering if im doing something wrong that maby i dont see, because when i put hte code directly in the header and call it it works perfectly... call :: <link rel="stylesheet" type="text/css" href="MyStyle.css" /> .css function :: .hr2 { border: 0; color: limegreen; background-color: limegreen; height: 2px; border-top:1px; border-style: solid; } Action :: <hr class=hr2> am i using the right way t o call the .css ? should i have more code in my .css to close it off properlly? Hi, I'm very new to website design, just starting building my first site. My site is asbestos-claim.org.uk. I've managed to get most things with the layout working okay, but having issues with my footer-right section (About Us page links etc). In IE8, IE9, FF, Chrome, Safari and Opera the site looks fine, however in IE6 and IE7, the footer-right section appears under the centre content section, right under the "simply complete the online form on this page for a free assessment and callback. This is a completely free service." text. Sorry, not sure if this issue needs posting in the HTML or CSS forum! Thanks, Freeze. I have recently updated a site that i am working on and everything works fine in safari and fire fox, but in IE7 the image on the left side is being droped down and causing the page as a whole to look diffrent.....please help, not sure whats going on. http://www.mdmoms.com/products/babybasics.html here is the html: HTML Code: <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
background-color: #80452E;
}
-->
</style></head>
<body>
<div align="center">
<table width="800" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td colspan="4"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="800" height="130">
<param name="movie" value="../../flash/header2.swf">
<param name="quality" value="high">
<embed src="../../flash/header2.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="800" height="130"></embed>
</object>
<script type="text/javascript" src="ieupdate.js"></script></td>
</tr>
<tr>
<td width="269"><img src="../../gifs/babybasics1234.gif" width="269" height="53" border="0"></td>
<td colspan="3" rowspan="2"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="532" height="322">
<param name="movie" value="../../flash/babybasics.swf">
<param name="quality" value="high">
<embed src="../../flash/babybasics.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="532" height="322"></embed>
</object>
<script type="text/javascript" src="ieupdate.js"></script></script>
</td>
</tr>
<tr>
<td rowspan="3"><img src="../../gifs/babybasics1234.jpg" width="268" height="473" border="0"></td>
</tr>
<tr>
<td width="69" bgcolor="#FFFFFF"><img src="baby009/images/spaah_r15_c2.jpg" width="69" height="56" border="0"></td>
<td width="377" bgcolor="#FFFFFF"><form name="buy" method="post" action="http://cart.novapointe.com/0635/novacart.pl">
<input name="cart_id" type="hidden" value="164">
<input name="sku" type="hidden" value="6004">
<input name="command" type="hidden" value="add">
<input name="view" type="hidden" value="cart">
<div align="center" class="style1">
<div align="left">
<input name="image" type="image" src="images/buy.jpg" width="111" height="26" border="0">
</div>
</div>
<input type=hidden name=.autodone value="http://www.mdmoms.com/product/babybasics.html">
</form></td>
<td width="87" bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<td colspan="2" bgcolor="#FFFFFF"><img src="../../gifs/producstthree.gif" width="414" height="173" border="0" usemap="#Map"></td>
<td bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<td colspan="4"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="800" height="22">
<param name="movie" value="../../flash/footer2.swf">
<param name="quality" value="high">
<embed src="../../flash/footer2.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="800" height="22"></embed>
</object>
<script type="text/javascript" src="ieupdate.js"></script></td>
</tr>
</table>
</div>
<map name="Map"><area shape="rect" coords="26,31,126,144" href="http://www.mdmoms.com/products/baby003/index.htm"><area shape="rect" coords="162,26,278,143" href="http://www.mdmoms.com/products/baby007/index.htm"><area shape="rect" coords="302,23,391,144" href="http://www.mdmoms.com/products/baby005/index.htm">
</map></body>
</html>
Thanks in advance Hey friends, I'm having a little issue with my photos on my site. I want to use the img tag that uses [img] /img] this style but can only seem to get this <img > style to work. If I use the [img] style I just get font showing up. How can I fix this? I hope this makes sense. Thank you in advance. Hello! I am having an issue with an unordered list resting beside an img. For some reason the bullet dots for the ul are inside the img instead of beside the text. I realise that my error is most likely something simple, but I have been staring at this darn thing for over week (it's a homework assignment) and I still cannot figure out what I have done wrong. Sadly my instructor's only advice is "Re-check your html and css files.", which was not helpful in any way as obviously I had already been doing that and still cannot find my mistake. I am not sure however if the error is with my html coding, or the css. I hope I don't get into trouble for it, but I am going to post this same question in the CSS forum, only with the code my css instead of the html. Here is my html code: HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <title>Prime Properties :: Listings</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <link rel="stylesheet" href="prime.css" type="text/css" /> </head> <body> <div id="wrapper"> <h1 id="logo"><img src="primelogo.gif" alt="Prime Properties" width="680" height="86" /></h1> <div id="button"> <div id="leftcolumn"> <ul> <li><a href="index.html">Home</a></li> <li><a href="listings.html">Listings</a></li> <li><a href="financing.html">Financing</a></li> <li><a href="contact.html">Contact</a></li> </ul> </div> </div> <div id="rightcolumn"> <h2>Listings</h2> <h3>Schaumburg Colonial</h3> <p>This single family home is a two-story colonial on a large lot.</p> <a href="schaumburg.jpg"> <img class="property" src="schaumburgthumb.jpg" alt="Schaumburg" align="left" /> </a> <ul> <li>Four bedrooms</li> <li>Two and 1/2 baths</li> <li>Finished family room</li> <li>Two car garage</li> <li>Listing #3432535</li> </ul> <br /> <h3>Libertyville Condo</h3> <p>New construction condo in downtown Libertyville.</p> <a href="libertyville.jpg"> <img class="property" src="libertyvillethumb.jpg" alt="Libertyville" align="left" /> </a> <ul> <li>Close to train</li> <li>Two bedrooms</li> <li>Two baths</li> <li>Two indoor parking spaces</li> <li>Listing #3432432</li> </ul> <br /> <div id="nav"> <ul> <li><a href="index.html">Home</a></li> <li><a href="listings.html">Listings</a></li> <li><a href="financing.html">Financing</a></li> <li><a href="contact.html">Contact</a></li> </ul> </div> <div id="footer">Copyright © 2011 Prime Properties<br /> <a href="mailto:Airamith@gmail.com">Mandi Adkins</a></div> </div> </div> </body> </html> And here is a link to the active site: Listings I'm sure there are other issue's in the code, I am still learning after all. My most pressing issue right now though concerns the bullets being inside the images. I would like to thank you in advance for any help you can offer, I really do appreciate it! Edit: I forgot to mention that I am required to use IE 8 or 9 for this class. Also, all of my coding validated through the W3C, both the html and the CSS. Also, I just noticed that the bullets are much closer to the text when it is viewed in Google Chrome instead of IE 9. Hey guys, Im currently working on a project for university and something is bothering me with this nav bar that i have created. I guess you can class this as CSS as well as HTML but i was wondering who could help me out. As you can see with image one things are looking alright, buttons are consistent with no gaps. This is because i have the images within a div and the background colour set as the same to look consistent. With image 3 you can see what would happen if the background colour was removed. Now the problem that i have is within image 2, when you stretch the window it stretches the background colour, the thing i want to do is wrap the div around the images so the colour stays behind them and only them as well as having the buttons centred. Any help would be great thanks. Hey first post, been around for a while but never actually joined. Anyway, client has a site that was built recently by another crowd. Works well in IE7, IE8, Firefox, Opera etc etc but the home page doesnt in IE6. This is an issue because the sites target viewers are apparently mostly using IE6. The issue is the home page doesnt format correctly, the others are fine so I'm thinking its got to be to do with the embedded login form. I've tried to sort it but its making me Any help much appreciated! http://www.freightmanagers.co.nz/index.html Hello. I'm a new user. I've done a couple different sites and I'm working on completing this one. There are a couple issues. In FireFox everything appears to be how I want it. I had to do the logo in an odd way. The top part is a background to the div that the Donate button appears in. The bottom part is an actual image. I did it this way because I couldn't use spans to get part of the image on the left and then have the Donate button align to the right. The only issue with it is when the user makes the font insanely large(Using the font resizer), there gets to be a gap, but then again when the user makes the font that large everything starts to become odd. In IE, this logo is split with quite a large gap. Also in IE, the top of the site is a little banner, which also has a large gap between that and the next bit of the site. It does not currently validate, throwing issues that the document does not allow <ul> where it is. I am not too sure why it won't let me. I have the unordered list nested within a span, nested within a div in order to get the site to flow properly. Another reason it does not validate is because apparently the W3 validater doesn't like SSI. Any help here would be appreciated. http://www.lilacblind.org/testing/NewSite Hi, I have a question about a CSS slider I am trying to incorporate into my website. Basically, each slide corresponds to an anchor (#slide1, #slide2, etc). When I click on the tab to open the slide, the entire webpage shifts downward so that the slider is positioned the very top of the browser. It's just like how certain websites like Wikipedia anchor to another part of the webpage so you don't have to scroll down, you can just click the link and it will bring the web page straight to that location. I don't want the slider to shift when I click on the link. I want to keep it so that if you click on the slider anchor, it remains in the same location. The only action should be the new tab opening up. To show an example, I am using a slider comparable to the one found he http://www.csslider.com. It's not the exact same, but as you can see the page shifts down when you click on a slide. Is there any way to rectify this issue easily? Thanks in advance |
|||||||