CODEWITHSUNDEEP
javascripthtmlreactjs
Mathew
Mathew

Reputation: 1430

how to create an html tooltip

Using reactjs, I am trying to create the question mark in a circle that when moused over gives the user more information, on this forum post they are discussing what I mean. Directly below the phrase "Edit your Textbox Label and insert this html code into it" you will find the code I attempted to use. Here is my render method in my attempt based on the instructions given in the post:

render(){
  return (<label <a target="_blank" href="#" title="testing">/>)
}

This doesn't work, I'd like to know what I'm doing wrong, additionally I'd like to know the name of these mouse-over-question-mark-things so that I can more easily search for more information on them.

Thanks

Here is my entire program:

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

if I replace line 1 for line 2 I get a page with only the word "asdf" on it as expected. I am attempting to make the question mark box I was talking about, I'd expect the word "testing" to appear as the title when I mouse over it.

Also is the question mark box called a tooltip or is it simply a single type of tooltip, tooltip being in that case a more general category of UI element.

Upvotes: 3

Views: 1090

Answers (1)

Dženis H.
Dženis H.

Reputation: 7822

As I understood, you need what it's called a Tooltip.
And for you question mark you can (should) use font-awsome.

Here is all the CSS code you need and under that, you can find a basic HTML implementation of it.

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

Upvotes: 1

Related Questions