在网页设计中，工具提示是一种提供额外信息的便捷方式，而让箭头指向工具提示底部能为用户带来更直观、友好的体验。通过CSS，我们可以轻松实现这一效果。

创建HTML结构。我们需要一个触发工具提示的元素，比如一个按钮或者链接，同时创建一个包含工具提示文本的元素。例如：

<button class="tooltip-trigger">Hover me</button>
<div class="tooltip">This is a tooltip</div>

接下来是CSS部分。我们先对触发元素进行基本样式设置，让它在页面上有合适的显示效果。例如：

.tooltip-trigger {
    background-color: #007BFF;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

对于工具提示元素，初始状态下我们让它隐藏，并且设置好它的基本样式，包括背景色、边框、圆角、内边距等。

.tooltip {
    position: absolute;
    background-color: #333;
    color: white;
    padding: 10px;
    border-radius: 5px;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}

关键的一步是让箭头指向工具提示底部。我们可以通过伪元素来创建这个箭头。以:before伪元素为例，在工具提示元素中添加如下样式：

.tooltip:before {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #333 transparent transparent transparent;
}

这里，top: 100%将箭头放置在工具提示底部，left: 50%使其水平居中。通过调整border-width和border-color来创建出指向下方的箭头形状。

最后，为了让工具提示在触发元素被悬停时显示，我们添加如下CSS：

.tooltip-trigger:hover +.tooltip {
    opacity: 1;
}

这段代码使得当鼠标悬停在触发元素上时，紧邻它的工具提示元素从隐藏状态变为可见状态。

通过以上简单的HTML和CSS代码，就能实现用CSS让箭头指向工具提示底部的效果，为网站的交互设计增添一份精致与友好。这种优化细节能够提升用户体验，让用户在浏览网页时更轻松地获取额外信息。