定位提示工具实例分享

以下实例中，提示工具显示在指定元素的右侧(left:105%)。

    注意top:-5px同于定位在容器元素的中间。使用数字5因为提示文本的顶部和底部的内边距（padding）是5px。

    如果你修改padding的值，top值也要对应修改，这样才可以确保它是居中对齐的。

    在提示框显示在左边的情况也是这个原理。

    显示在右侧：

.tooltip .tooltiptext {

    top: -5px;

    left: 105%; 

}

    显示在左侧：

.tooltip .tooltiptext {

    top: -5px;

    right: 105%; 

}

    如果你想要提示工具显示在头部和底部。我们需要使用margin-left属性，并设置为-60px。这个数字计算来源是使用宽度的一半来居中对齐，即：width/2(120/2=60)。

    显示在头部：

.tooltip .tooltiptext {

    width: 120px;

    bottom: 100%;

    left: 50%; 

    margin-left: -60px; /* 使用一半宽度 (120/2 = 60) 来居中提示工具 */

}

    显示在底部：

.tooltip .tooltiptext {

    width: 120px;

    top: 100%;

    left: 50%; 

    margin-left: -60px; /* 使用一半宽度 (120/2 = 60) 来居中提示工具 */

}