|
CSS - Tooltip Using Css On Map
I have .gif picture (country) at the bottom of the page. Map on it defines hotspots (states).
Class hover works great with "normal" hyperlinks, but when I am trying to use them in this, nothing seems to be easy. I just want to have possibility to make hover tooltip based on poligon hotspots map hyperlinks (then I would use PHP to get data from a database). Anybody has this problem solved? Similar Tutorialshi, I have written a small tooltip code which works in FF and Opera but does not work in IE 6. When I hover it shows nothing. I have the following css Code: a {position: relative;}
a span {display: none;}
a:hover span {
position: absolute;
top: 5px;
left: 30px;
display: block;
background: #fdd;
border: 1px solid red;
}
and am using it like this Code: <a href=# >Name<span>full name</span></a> this is my CSS only tooltip, how to make that tooltip to bi on top of every item it is used for Code:
<style>
a.tooltip span {display:none; padding:2px 3px; margin-left:8px; width:230px; ;}
a.tooltip:hover span{display:block; position: absolute;top:; border:1px solid #cccccc; background:#ffffff; color:#6c6c6c; font-size:12px;}
a:hover {background:#ffffff; text-decoration:none;} /*BG color is a must for IE6*/
</style>
<table width="768" border="1" align="center">
<tr>
<td>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br><br>
<br>
<br>
<a href="{url_download}" class="tooltip">
<div class="progress-bar" style="width:300px; float:left;">
--------------------------------------------
</div>
<span>
<div>
<strong>File Size:</strong> {filesize_value} (KB)<br>
<strong>Downloads:</strong> {hits_value}<br>
<strong>Added:</strong> {created_date_value}<br>
{description}
{screenshot_begin}<img src="{screenshot}" align="right" />{screenshot_end}
</div>
</span>
</a>
<div class="seperate" style="float:left;"></div>
<br>
<br>
<br>
<br>
<br>
<br><br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br><br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<a href="{url_download}" class="tooltip">
<div class="progress-bar" style="width:300px; float:left;">
--------------------------------------------
</div>
<span>
<div>
<strong>File Size:</strong> {filesize_value} (KB)<br>
<strong>Downloads:</strong> {hits_value}<br>
<strong>Added:</strong> {created_date_value}<br>
{description}
{screenshot_begin}<img src="{screenshot}" align="right" />{screenshot_end}
</div>
</span>
</a>
<div class="seperate" style="float:left;"></div>
</td>
</tr>
</table>
I have a problem with a tooltip i'm trying to make look decent in both browsers, IE and firefox. it looks beautiful in firefox the way i have it. but in IE it stick the image way above the tooltip and the padding is a bit funky. Code: <img src="eq2icons/"<?=$icon?>" class="itemicon" width="42" height="42"><table class="ttb" width="350" cellspacing="0" cellpadding="0"><tr bgcolor='#FFDE2E'><td colspan=2><span class=quality><?=$itemname?></span></td></tr><tr><td width=88%><?=$text1?></td><td width=12%></td></tr><tr><td colspan=2><?=$text2?></td></tr><tr><td colspan=2><?=$text3?></td></tr><tr><td colspan=2><?=$text4?></td></tr><tr><td colspan=2><?=$text5?></td></tr><tr><td colspan=2><?=$text6?></td></tr><tr><td colspan=2><?=$text7?></td></tr><tr><td colspan=2><?=$text8?></td></tr><tr><td colspan=2><?=$text9?></td></tr><tr><td colspan=2><?=$text10?></td></tr></table> CSS: Code:
span.quality { color: #000000; font-weight: bold; padding: 2px;}
span.quality1 { color: #FFCC00; font-weight: bold;}
span.quality2 { color: #21E626; font-weight: bold;}
table.ttb {
background-color: #282828;
color: #FFFFFF;
margin: 0px;
padding: 1px;
border-bottom: 1px solid #FFF;
border-right: 1px solid #FFF;
border-top: 1px solid #FFF;
border-left: 1px solid #FFF;
font-size: 11px;
}
table.ttb a:link { color: #8888FF; }
table.ttb a:visited { color: #7777EE; }
table.ttb tr {
padding: 3px;
}
table.ttb h6 {
font-size: 10px;
}
.itemicon{
float: right;
padding: 2px;
margin-top: 12px;
}
Here the site in question. (yes, i'm sorry i do require a signup to view the data to track and eliminate scrapers/data miners. Free signup though) http://www.eq2archives.com The tooltip is currently shown if you go to "quests by zone" then choose a zone and choose a quest with an item reward. ill post a few shots in IE and Mozilla thanks in advance =) I'm using a CSS-based tooltip on a page I'm developing, and it displays fine on IE (v8), but on Firefox (v3.6.2) there is an additional 25 pixels or so of padding/margin at the right. I can't for the life of me work out why, so if anybody wouldn't mind taking a look at the page in question and seeing if they can fix what I'm sure is a relatively simple problem, I'd greatly appreciate it: As this is my first post, I'm not allowed to post the URL of the page I'm having problems with, so please PM me if you're interested in taking a look. Thanks, Mark Can you style the tooltip box that pops up on hover over an object with the 'title' attrib set? If so how? Hours of googling have only led to some fairly complex DHTML/Java solutions that I don't like the look of. Cheers, John. Not know why tooltip box(class .show_tooltip) there is left when mouse enter on li a, i want display each tooltip box top same link that mouse is enter on it and if the width and height was more or less it is same style.(i want links put in right) http://jsfiddle.net/AQh6y/3/ I want example this (for how): what do i do? CSS: Code: .show_tooltip{
background-color: #E5F4FE;
display: none;
padding: 5px 10px;
border: #5A5959 1px solid;
position: absolute;
z-index: 9999;
color: #0C0C0C;
/*margin: 0 0 0 0;
top: 0;
bottom: 0;*/
}
HTML: Code: <ul>
<li>
<div class="show_tooltip">
put returns between paragraphs
</div>
<a href="#">about</a>
</li>
<br>
<li>
<div class="show_tooltip">
for linebreak add 2 spaces at end
</div>
<a href="#">how</a>
</li>
</ul>
jQuery: Code: $("li a").mouseenter(function(){
$(this).prev().fadeIn();
}).mousemove(function(e) {
$('.tooltip').css('bottom', e.pageY - 10);
$('.tooltip').css('right', e.pageX + 10);
}).mouseout(function(){
$(this).prev().fadeOut();
})
Sample can be seen at this link I'm using some jQuery Tool tooltip code that will bring up a stylized tooltip when the user hovers over a set of li tags. Right now, I'm just playing with the sample png file that came with the demo . This uses a black box as a background image and then anything I put inside a div class="tooltip" shows up as text inside that image. Nice, but I can't quite get the tooltip box to pop up where I want it. The li tags are nested inside a div, which is nested inside other divs. So, I need some help figuring out how to tweak the CSS to reposition the tooltip. I'd like it to appear just to the right of the selected li tag, and still stay within the maincol div. Actually, I don't even mind if it floats outside that maincol, just as long as I can get it to show up somewhat closer to the li tag's text. and just some of the relevant css Code: #maincol.second {
padding: 8px;
width:700px;
margin-left: 190px;
margin-right:10px;
background-color:#fff;
min-height:730px;
}
/* tooltip styling */
.tooltip {
display:none;
background:url(http://static.flowplayer.org/tools/img/tooltip/black_arrow_big.png);
height:163px;
padding:40px 30px 10px 30px;
width:200px;
font-size:11px;
color:#fff;
}
.switches {width: 400px;}
.switches ul{
font-size: .85em;
margin: 1em 0 .5em 0;
}
.switches li{
list-style-type:none;
color:#800000;
}
Can anyone tell me how to change the background colour of all tooltip texts on a web page? Cheers. |
|||||||