Question

我正在使用react开发基于文本的网页游戏。

我有一个ItemDisplay类，该类显示一堆Item类，每个类代表一个项目。

我使用了很多react-bootstrap来处理模式和工具提示，但是仍然有一些我无法解决的问题。

这是ItemDisplay的屏幕截图：

ItemDisplay代码

ItemDisplay
    class ItemDisplay extends Component {
    constructor(props) {
        super(props);
        this.state = {
            show: false
        }
    }
    render() {
        // items attributes are in object that looks like: {name: 'sword', desc: 'a stupid sword', atk: 8, dex: 1}, {name: 'shield', desc: 'a stupid shield', def: 1}];
        let items = Object.keys(this.props.items).map(item => <Item key={this.props.items[item].name} show={this.state.show} attri={this.props.items[item]}></Item>);


        return (
            <div className='item-list'>
                {items}
            </div>
            )
    }
}

export default ItemDisplay;

和Item类

class Item extends Component {
    constructor(props) {
        super(props);
        this.state = {
            show: false
        };
        this.handleHoverOn = this.handleHoverOn.bind(this);
        this.handleHoverOff = this.handleHoverOff.bind(this);
    }

    handleHoverOn() {
        this.setState({show: true});
    }

    handleHoverOff() {
        this.setState({show: false});
    }

    toTitle = (word) => {
        return word.charAt(0).toUpperCase() + word.slice(1);
    }

    render() {
        let attributes = Object.keys(this.props.attri).map((key) => <p>{this.toTitle(key)}: {this.props.attri[key]}</p>)
        return (
            <div className='aux'>
                <OverlayTrigger key={this.props.attri.name} placement='top' className='item'
                                overlay={<Tooltip id={attributes.name}>{attributes}</Tooltip>}>
                    <p>{this.props.attri.name}</p>
                </OverlayTrigger>
            </div>
        )
    }
}

export default Item;

这是我的问题：

从屏幕截图中可以看到，我无法在该框中包裹Sword of A Thousand Truths。我不知道是不是因为我有div包装了OverlayTrigger
到目前为止，将鼠标悬停在项目名称（仅单词）上将在Tooltip中显示属性（atk，def等），但是我希望能够将鼠标悬停而不是仅在整个方框上具有相同的效果。有办法吗？

编辑：认为我也应该添加我的CSS

ItemDisplay.css

.item-list {
    height: 100%;
    white-space: nowrap;
    overflow-y: hidden;
    overflow-x: scroll;
    padding-left: 0;
}
.overlay {
    height: 100%;
    broder: 1px solid black;
}

Item.css

.item {
    word-wrap: break-word;
}

.aux {
    display: inline-block;
    height: 100%;
    width: 100px;
    border: 1px solid;
    border-radius: 5px;
    margin: 2px 2px 2px 2px;
    text-align: center;
    top: 50%;

}

.equip {
    border: 2px solid #267f0b;
    font-weight: bold;
}

Reactjs悬停并显示问题

0 个答案: