div中的CSS工具提示 [英] CSS Tooltip in a div

问题描述

你好，

我有一个CSS工具提示:

Hello,

I have a CSS tooltip :

* {
font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px;
 }
a {text-decoration:none;}
a:hover {background:#ffffff; text-decoration:none;} /*BG color is a must for IE6*/
a.tooltp span {display:none; padding:3px 2px; margin-left:0px; width:130px;}
a.tooltp:hover span
{display:inline;
position:absolute;
top:10px;
-moz-box-shadow: 0px 0px 8px 4px #666;
    -webkit-box-shadow: 0px 0px 8px 4px #666;
    box-shadow: 0px 0px 8px 4px #666;
 border:2px solid white; background:#000; color:white;}

我是这样使用的:

I use it this way:

<div class='container'>
<a href='#' class='tooltp'> <div class="box"></div><span>This is the tooltip text</span>
</a></div>

它在Chrome中完美运行，但是在Firefox中，工具提示显示在容器div的右端，而不是显示在框div的右侧.有人可以告诉我如何解决它吗?

It works perfect in Chrome, but in Firefox, the tooltip is displayed on the right-end of the container div, instead of being displayed right to box div. Can anyone tell me how to fix it?

推荐答案

以顶部"位置为10px绝对定位跨度意味着工具提示"将始终出现从页面顶部起10像素.您可以尝试这样的操作:

Absolutely positioning the span with a ''top'' position of 10px means the ''tooltip'' will always appear 10px from the top of the page. You can try something like this:

a.tooltp:hover span
{display:inline;
position:relative;
left:50px;
-moz-box-shadow: 0px 0px 8px 4px #666;
    -webkit-box-shadow: 0px 0px 8px 4px #666;
    box-shadow: 0px 0px 8px 4px #666;
 border:2px solid white; background:#000; color:white;}

相对于"box" div定位的位置，并将工具提示的左侧设置为距box div左侧50px.您可能需要考虑使用javascript来精确确定该值，这取决于box div的宽度.

Where the positioning is relative to the "box" div and sets the left of the tool tip 50px from the left of the box div. You may want to consider using javascript to exactly how what the value should be for that, it will depend on how wide the box div is.

这篇关于div中的CSS工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！