Search the Community
Showing results for tags 'tooltip'.
Found 3 results
-
Hello, I am currently building a website. I would like to have a page preview for the internal links. But I have no idea how that works. I imagine that as the page preview of Wikipedia. If you move the mouse over a link, the image and the first words of the site are displayed in a tooltip. Here is a link https://www.mediawiki.org/wiki/Page_Previews Does anyone have an idea how to realize this? Have googled a lot and found nothing. Many Thanks
-
If you look at www.cleantelligent.com/tour, you will see active, working tooltips that are stylish and useful. They are purely CSS without any JS or jQuery.We have moved to a WordPress install and I am trying to copy and paste code from our live site to our beta.cleantelligent.com/tour So far, everything is great, until these tool tips. For some reason, the CSS is not being read across.Is this a WordPress issue? Is it reading my code differently?
-
Hi everyone I've been browsing w3schools forums and I love how helpful you all are, so before I say anything else, I'd like to thank you all for being so kind to people who ask really noobish questions ^^ Well, I read the guidelines as I didn't want to post anything inappropriate, and found I was allowed to include a link to a personal website as long as it doesn't compete with w3school's tutorials, which I am finding to be incredibly useful. The website I am working on (and own) is www.slashff.com, where "slashff" stands for "slash forfeit" as it is a League of Legends website. Unfortunately (and I know this was a mistake due to how many problems it has caused me) it is hosted by WEBS, which means I am very limited with what I can html code; for instance, there is no way for me (that I've worked out) to use Ajax Tooltips, which seems to be the easiest form of tooltiping, as I see it in the source code for a lot of websites. My website is unfinished at the moment, but I thought it'd be nice to give some background so people will not freak out seeing "slashff", haha. Anyway, I was trying to add tooltips to images, using Kumar Sundarum's Simple Tooltip Code (it's a html tutorial like site, so I won't link it, I'm sure you could google it and find it) and I succeeded, but with some varying results of achievement. The first problem is that some part of the code must be shared because if there are two images sharing the code, only the information from one of the tooltips is shown. It's probably easier to show you, than to explain: http://www.slashff.com/tooltips and here is the relevant coding (and I apologise in advance for the messiness of it, I butchered it pretty hard): <head> <script language="JavaScript">//tooltip Position var offsetX = 130; var offsetY = 0; var opacity = 100; var toolTipSTYLE; function initToolTips(){ if(document.getElementById){ toolTipSTYLE = document.getElementById("toolTipLayer").style; } if(is_ie || is_nav6up) { toolTipSTYLE.visibility = "visible"; toolTipSTYLE.display = "none"; document.onmousemove = moveToMousePos; } } function moveToMousePos(e) { if(!is_ie){ x = e.pageX; y = e.pageY; }else{ x = event.x + document.body.scrollLeft; y = event.y + document.body.scrollTop; } toolTipSTYLE.left = offsetX+'px'; toolTipSTYLE.top = offsetY+'px'; return true; } function toolTip(msg, fg, bg) { if(toolTip.arguments.length < 1) // if no arguments are passed then hide the tootip { if(is_nav4) toolTipSTYLE.visibility = "hidden"; else toolTipSTYLE.display = "none"; } else // show { if(!fg) fg = "#777777"; if(!bg) bg = "#ffffe5"; var content = '<table border="0" cellspacing="0" cellpadding="0" class="toolTip"><tr><td bgcolor="' + fg + '">' + '<table border="0" cellspacing="1" cellpadding="0"<tr><td bgcolor="' + bg + '">'+ '<font face="sans-serif" color="' + fg + '" size="-2">' + msg + '</font></td></tr></table>'+ '</td></tr></table>'; if(is_nav4) { toolTipSTYLE.document.write(content); toolTipSTYLE.document.close(); toolTipSTYLE.visibility = "visible"; } else if(is_ie || is_nav6up) { document.getElementById("toolTipLayer").innerHTML = content; toolTipSTYLE.display='block' } } } s = '<table width="100%" cellspacing="1" cellpadding="0" border="0">'; s += '<tr><td><img style="height:120px;" src="http://www.slashff.com/Champions/Avatars/ashe.png" border="0"/> </td><td valign="left">Ashe<br>THE FROST ARCHER<br>Health.............1817<br>Mana...............803<br>Speed..............300<br>Armor..............72.7<br>Magic Resist.......30<br>Critical Chance....0%<br>Health Per 5 Sec...14.4<br>Mana Per 5 Sec.....13.5<br>Range..............600</td></tr>'; s += '<tr><td colspan="2" class="Text"><hr/>Ashe is a primarily auto-attack champion who <br>deals Physical Damage.</td></tr>'; s += '</table>' function show(){ toolTip(s) } //--></script> </head> <body onload="initToolTips();"> <div id="toolTipLayer" style="position:absolute; visibility: hidden;left:0;right:0"></div> <span onMouseOver="show()" onMouseOut="toolTip()" class="Text"> <a HREF="/ashe"><img style="height:120px;" src="http://www.slashff.com/Champions/Avatars/ashe.png"/></a></span> </body> I'm not sure which parts could be causing errors... - - - - - My second problem, if you'd be so inclined to help me, is this: www.slashff.com/ashe if you hover your mouse over the Ashe icon next to the Lore, you will notice it flickers on and off. This is the coding: <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style> .Text{ font-family: Verdana, Arial, Sans-serif, 'Times New Roman'; font-size: 8pt; font-weight: normal; font-style: normal; color: #333333; text-decoration: none; } .toolTip { font-family: Verdana, Arial, Sans-serif, 'Times New Roman'; font-size: 9pt; filter:alpha(opacity=100); -moz-opacity: 1; opacity: 1; /* comment the above 3 line if you don't want transparency*/ } </style> <script language="javascript" defer="false"> //browser detection var agt=navigator.userAgent.toLowerCase(); var is_major = parseInt(navigator.appVersion); var is_minor = parseFloat(navigator.appVersion); var is_nav = ((agt.indexOf('mozilla')!=-1) && (agt.indexOf('spoofer')==-1) && (agt.indexOf('compatible') == -1) && (agt.indexOf('opera')==-1) && (agt.indexOf('webtv')==-1) && (agt.indexOf('hotjava')==-1)); var is_nav4 = (is_nav && (is_major == 1)); var is_nav6 = (is_nav && (is_major == 1)); var is_nav6up = (is_nav && (is_major >= 1)); var is_ie = ((agt.indexOf("msie") != -1) && (agt.indexOf("opera") == -1)); </script> <script language="JavaScript">//tooltip Position var offsetX = -420; var offsetY = 0; var opacity = 100; var toolTipSTYLE; function initToolTips(){ if(document.getElementById){ toolTipSTYLE = document.getElementById("toolTipLayer").style; } if(is_ie || is_nav6up) { toolTipSTYLE.visibility = "visible"; toolTipSTYLE.display = "none"; document.onmousemove = moveToMousePos; } } function moveToMousePos(e) { if(!is_ie){ x = e.pageX; y = e.pageY; }else{ x = event.x + document.body.scrollLeft; y = event.y + document.body.scrollTop; } toolTipSTYLE.left = offsetX+'px'; toolTipSTYLE.top = offsetY+'px'; return true; } function toolTip(msg, fg, bg) { if(toolTip.arguments.length < 1) // if no arguments are passed then hide the tootip { if(is_nav4) toolTipSTYLE.visibility = "hidden"; else toolTipSTYLE.display = "none"; } else // show { if(!fg) fg = "#777777"; if(!bg) bg = "#ffffe5"; var content = '<table border="0" cellspacing="0" cellpadding="0" class="toolTip"><tr><td bgcolor="' + fg + '">' + '<table border="0" cellspacing="1" cellpadding="0"<tr><td bgcolor="' + bg + '">'+ '<font face="sans-serif" color="' + fg + '" size="-2">' + msg + '</font></td></tr></table>'+ '</td></tr></table>'; if(is_nav4) { toolTipSTYLE.document.write(content); toolTipSTYLE.document.close(); toolTipSTYLE.visibility = "visible"; } else if(is_ie || is_nav6up) { document.getElementById("toolTipLayer").innerHTML = content; toolTipSTYLE.display='block' } } } s = '<table width="100%" cellspacing="1" cellpadding="0" border="0">'; s += '<tr><td><img style="height:120px;" src="http://www.slashff.com/Champions/Avatars/ashe.png" border="0"/> </td><td valign="left">Ashe<br>THE FROST ARCHER<br>Health.............1817<br>Mana...............803<br>Speed..............300<br>Armor..............72.7<br>Magic Resist.......30<br>Critical Chance....0%<br>Health Per 5 Sec...14.4<br>Mana Per 5 Sec.....13.5<br>Range..............600</td></tr>'; s += '<tr><td colspan="2" class="Text"><hr/>Ashe is a primarily auto-attack champion who deals Physical Damage.</td></tr>'; s += '</table>' function show(){ toolTip(s) } //--></script> </head> <body onload="initToolTips();"> <div id="toolTipLayer" style="position:absolute; visibility: hidden;left:0;right:0"></div> <span onMouseOver="show()" onMouseOut="toolTip()" class="Text"><a HREF="/ashe"><img style="height:120px;" src="http://www.slashff.com/Champions/Avatars/ashe.png"></a></span> </body> </html> - - - - Thanks in advance to anyone who reads this. I'm hoping someone can help me and tell me what I did wrong, as I'm too inexperienced to figure it out myself. I have been trying though, of course. - jhoijhoi
