Topic: hide tooltip in react

c_ghost pro asked 6 years ago


Hello How i can hide tooltip (on the button) when this be press and change state (re-render). I have a still visible tooltip :( Thanks

Jakub Strebeyko staff answered 6 years ago


Hi c_ghost,

Well, having a working minimal example on jsfiddle / codepen would be the best, but no mind. Anyway, I copied the code and after some fiddling (making sure there is a Router to wrap around the Link, dealing with quote issues like the one in the if statement around said Link), it struck me hard. The tooltip not working properly may have something to do with with which tooltip is used: please notice the subtle but crucial difference between a MDB jQuery Tooltip and its MDB React counterpart. Using the first means having it outside of React rendering lifecycle meaning out of control. Please consider using MDB React components in your React projects and let know whether it solved the problem. :)

With Best Regards,
Kuba


c_ghost pro answered 6 years ago


Maybe better send pics to email ? :(  

c_ghost pro answered 6 years ago


import React, { Component } from 'react'; import { Link } from 'react-router-dom'; import { Button } from 'mdbreact' import Autocomplete from 'react-autocomplete' class WeldingPlaceLink extends Component { state = {editing: this.props.id===0, name : this.props.name, id : this.props.id, items: []}; onSave = this.props.onSave; componentWillMount(){ this.setState ({items: this.loadData(this.state.name)}) } StartEditing = (e) => { // Начало редактирования this.lastName = this.state.name; this.lastId = this.state.id; this.setState ({editing: true}); } handleCancel = (e) => { // Отмена редактирования this.setState ({name: this.lastName, id: this.lastId, editing: false}) } handleSave = (e) => { // Сохранение данных if (this.onSave) this.onSave(this.state.id, this.state.name); this.setState ({editing: false}); } loadData (str){ // Загрузка данных из базы данных let arr = []; arr = [ { label: 'Клиент на Ильичевской 5',id: 1}, { label: 'Клиент на Технической 9',id: 2}, { label: 'Муфта на перекрестке Ильичевской',id: 3}, { label: 'Ящик на Якира 5',id: 4}, { label: 'Муфта на Старых большевиков 10',id: 5}, { label: 'Кассета на Лозоватке',id: 6}, { label: 'Муфта на повороте на Мелешкина 10',id: 7}, { label: 'Кассета в кабинете бухгалтерии',id: 8}, { label: 'Клиент Леонида Бородича 10',id: 9}, { label: 'Новая почта Крыленко 10',id: 10}, { label: 'Косарева 26',id: 11}, { label: 'Клиент на Ильичевской 22',id: 12}]; return arr; } render (){ const { id,name } = this.props; let Content = <div style={{color: 'red'}}>WeldingPlaceLink: Не указан параметр id или пустое name</div>; // <input style={{width: '100%'}} defaultValue={this.state.name} // onFocus={(e)=>{e.target.select()}} autoFocus={true} // onKeyPress={(e)=>{if (e.key==='Enter') this.handleSave();}} // onKeyDown={(e)=>{if (e.key==='Escape') this.handleCancel();}} // /> if (this.state.editing) { // Если режим редактирования Content = <div className='d-flex'> <Autocomplete getItemValue={(item) => item.label} wrapperStyle={{display: 'inline-block', width: '100%'}} inputProps={{autoFocus: true, style: {width: '100%'} }} items={this.state.items.filter((item) => item.label.toUpperCase().indexOf(this.state.name.toUpperCase())>=0 || item.id==this.state.name)} renderItem={(item, isHighlighted) => <div key={item.id} style={{ background: isHighlighted ? 'lightgray' : 'white' }}> {item.label} </div> } menuStyle ={{ borderRadius: '3px', boxShadow: '0 2px 12px rgba(0, 0, 0, 0.1)', background: 'rgba(255, 255, 255, 0.9)', padding: '2px 0', fontSize: '90%', position: 'fixed', overflow: 'auto', maxHeight: '50%', // TODO: don't cheat, let it flow to the bottom zIndex: '99999' }} value={this.state.name} onChange={(e) => this.setState ({name: e.target.value})} onSelect={(str,val) => {this.setState ({name: val.label, id: val.id})}} /> <span className="trigger-square badge-success" data-toggle="tooltip" data-placement="top" title="сохранить" onClick={this.handleSave}> <i className="fa fa-check" aria-hidden="true"></i> </span> <span className="trigger-square badge-danger" data-toggle="tooltip" data-placement="top" title="отменить" onClick={this.handleCancel}> <i className="fa fa-close" aria-hidden="true"></i> </span> </div>; } else if ((id>0) && (name!=='')) { // Если уже указан код и имя Neighbor Content = <div> <i className="fa fa-flag" aria-hidden="true" style={{color: 'red'}}/> <Link to={'/welding/' + this.state.id+ '/'} style={{cursor: 'default'}}> <span style={{paddingLeft: "10px"}}> {this.state.name}</span> </Link> {this.props.onSave && <i id='edit_button' style={{color: "black", paddingLeft: "5px"}} className="fa fa-pencil" aria-hidden="true" onClick={this.StartEditing} data-toggle="tooltip" data-placement="top" data-original-title="нажмите для редактирования"/>} </div> } return Content; } } export default WeldingPlaceLink;     use: <WeldingPlaceLink id={5} name={'test'} onSave={(e)=>{}}/>

Jakub Strebeyko staff answered 6 years ago


Hi there, c_ghost Welcome to the MDB React Support Board! Could you please provide a minimum working example of this on behavior on jsfiddle / codepen, so we can try and see what is up? Knowing your use case would greatly improve the quality of the support provided. Thanks. With Best Regards, Kuba

Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB React
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags