如何创建一个 HTML 工具提示

3
使用Reactjs,我正在尝试创建一个带有问号的圆圈,当鼠标悬停时会向用户提供更多信息。在这个论坛帖子中,他们正在讨论我的意思。直接在“编辑您的文本框标签并将此HTML代码插入其中”短语下面,您将找到我尝试使用的代码。这是我根据帖子中给出的说明尝试的渲染方法:
render(){
  return (<label <a target="_blank" href="#" title="testing">/>)
}

这不起作用,我想知道我做错了什么,另外我想知道这些鼠标悬停的问号东西的名称,以便更轻松地搜索更多信息。

谢谢

这是我的整个程序:

<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.js"></script>
</head>

<body>
<div id="root"></div>
<script type="text/babel">

class NameForm extends React.Component {
    render() {
        // return (<div><text>asdf</text></div>) // line 1
        return (<label <a target="_blank" href="#" title="testing">/>) // line 2
    }
}

ReactDOM.render(
    <NameForm />,
    document.getElementById('root')
);

</script>
</body>

如果我将第一行替换为第二行,我会得到一个只有单词"asdf"的页面,这是预期的。我正在尝试制作我之前提到的问号框,当我将鼠标悬停在上面时,我希望看到单词"testing"出现作为标题。
此外,问号框被称为工具提示还是仅仅是一种类型的工具提示?在这种情况下,工具提示是否是更一般的UI元素类别。

1
在这个例子中,它们通常被称为“工具提示”:我看了你的链接。那段代码里有一个img标签?这里到底是哪里出了问题?你能否在问题中添加更多信息? - omarjmh
你是否在维护任何状态来显示和隐藏信息框(工具提示)? - McRist
1个回答

1
我理解您需要的是所谓的“工具提示”(Tooltip)。 至于问号,您可以(应该)使用font-awsome。 以下是您需要的所有CSS代码,下面是它的基本HTML实现。

.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 0.3s;
}
.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}



.far {
margin-right: 5px;
color: #00F;
 padding: 7px;
}
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">


<body style="text-align:center;">

<h2>Tooltip</h2>
<p>Move the mouse over the icon below:</p>

<div class="tooltip plus"> <i class="far fa-question-circle"></i> MORE INFO
  <span class="tooltiptext plus">

Here you would put additional info that will displayed on mouse hover</span>
</div>

</body>
</html>


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接