Closed
Description
I'm writing forms and I need to check if input is valid.
But right now I'm testing how your Tooltips work in general. It doesn't work properly for me. Either I'm doing smth wrong or your tooltip is wrong.
I have this code:
import React, { useState } from 'react';
//...
import ReactTooltip from 'react-tooltip';
//....
function AddNewCanteen() {
return (
<div>
<form onSubmit={handleSubmit}>
<h6 className="py-3">
<b>Pridėti naują maitinimo įstaigą:</b>
</h6>
<div className="form-group" style={{ position: 'relative', width: '95%' }}>
<label htmlFor="name">
Pavadinimas <span className="fieldRequired">*</span>
</label>
<a data-tip data-for='global'>
<input
type="text"
className="form-control mt-2"
name="name"
id="id_name"
value={duomenys.name}
onChange={handleChange}
onInvalid={validateField}
style={
duomenys.name.length > 0 ? infoValid.name ? { border: "1px solid lightgray" }
: { border: "2px solid red" }
: { border: "1px solid lightgray" }
}
required
pattern="^[A-ZĄ-Ž]{1}[\S\s]{1,64}$"
maxLength={64}
data-toggle="tooltip"
data-placement="top"
title="Įveskite maitinimo įstaigos pavadinimą"
/>
</a>
<ReactTooltip id='global' aria-haspopup='true' delayHide={1000} >
<p>This is a global react component tooltip</p>
<p>You can put every thing here</p>
<ul>
<li>Word</li>
<li>Chart</li>
<li>Else</li>
</ul>
</ReactTooltip>
{duomenys.name.length > 0 ? infoValid.name ? <span className="approvemsg"><FontAwesomeIcon icon={faCheck} /></span>
: <span className="warningmsg"><FontAwesomeIcon icon={faXmark} /></span>
: <span className="approvemsg"></span>}
<br></br>
</div>
//.....
</div>
);
}
export default AddNewCanteen;What is wrong with it?
Why the tooltip doesn't disappear when I move mouse cursor away?
Why does it remain forever?
That really annoys.