Question

我使用Reactjs，试图在一个圆圈中创建一个问号，将鼠标悬停在该圆圈上可以为用户提供更多信息，在this论坛上，他们正在讨论我的意思。在短语“编辑文本框标签并将此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>

如果我将第1行替换为第2行，则会得到一个仅包含单词“ asdf”的页面，这与预期的一样。我正在尝试制作我正在谈论的问号框，希望将“ testing”一词悬停在标题上。

问号框也称为工具提示，或者仅仅是工具提示的一种，在这种情况下，工具提示是UI元素的更一般的类别。

Answer 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>

如何创建html工具提示

1 个答案: