如何将工具提示定位在光标上方答案

【问题标题】：How to positioning the tooltip above cursor如何将工具提示定位在光标上方
【发布时间】：2014-02-09 13:53:03
【问题描述】：

我只在我的新网站项目中实现了一个工具提示 css。

但是如何设置工具提示显示在光标上方？

我拥有的 CSS：

a.tooltip {outline:none;}
a.tooltip strong {line-height:30px;}
a.tooltip:hover {text-decoration:none; cursor: help;} 
a.tooltip span {
z-index:10;display:none; padding:14px 20px;
margin-top:-30px; margin-left:28px;
width:220px; line-height:17px;
}

a.tooltip:hover span{
display:inline; position:absolute; color:#373535;
border:2px solid #D3D3D3; background:#fffFff;}

/*CSS3 extras*/
a.tooltip span
{
    border-radius:5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;

    -moz-box-shadow: 1px 1px 8px #CCC;
    -webkit-box-shadow: 1px 1px 8px #CCC;
    box-shadow: 1px 1px 8px #CCC;
}

这是html：

<a href="#" class="tooltip">Normal Text<span><strong>Tooltip title</strong><br />This would be the content of the tooltip that I want to show up above the cursor.</span></a>

谢谢大家帮帮我！

问候，迪伦

【问题讨论】：

标签： html css position tooltip

【解决方案1】：

首先将锚标记的position 设置为relative，以将其设置为absolute 定位子级的参考点。

然后使用以下 CSS 声明：

a.tooltip span {
    z-index:10;
    display:none;
    padding:14px 20px;
    width:220px;
    line-height:17px;
}

a.tooltip:hover span {
  display:block;
  position:absolute;
  bottom: 2em;       /* Use a relative unit to increase the capability */
  left: 0;
  color:#373535;
  border:2px solid #D3D3D3;
  background:#fffFff;
}

JSBin Demo

更新

如果您想在顶部中心显示工具提示框，请将left 属性设置为50% 然后transform: translateX(-50%)：

a.tooltip:hover span {
  /* ... */
  left: 50%;
  -webkit-transform: translateX(-50%);
}

Updated Demo

【讨论】：

太棒了！但是现在如果我在 ipad 上查看它并且工具提示出现在视口之外，工具提示将被切断。如何修改工具提示始终在视口内的代码？再次感谢！
@user3214942 由于 tooltip 被定位为absolutely，它被从document normal flow中移除。除非您使用 Javascript，否则没有纯 CSS 方法可以实现此目的。如果 tooltip 从左侧被截断。改为设置left: 0。但是对于top side，ancher标签上方应该有一些适当的空间，或者你需要在光标下显示tooltip。
right: 0 解决了我的问题，我的工具提示超出了屏幕并在右侧被截断。谢谢:)

【解决方案2】：

http://jsfiddle.net/FNpK7/

我加了

a.tooltip span {
    position: relative; display: inline-block;
    margin-top:-120px; margin-left: -100px;
}

【讨论】：

【解决方案3】：

查看http://jsfiddle.net/RPNUx/

a.tooltip span {
z-index:10;display:none; padding:14px 20px;position:fixed;
margin:-50px;
width:220px; line-height:17px;
}

或查看此答案HTML-Tooltip position relative to mouse pointer

【讨论】：