如何在SVG映射上显示工具提示(响应w / SCSS)

2022-10-15 13:40:10标签javascriptcssreactjssass
提问

我有一张美国州的地图,上面画了县线。 它有能力改变颜色,当用户鼠标在一个县上空徘徊时。我将分享使用SCSS的代码 然而,代码的工具尖端部分并没有工作,我想在一个用户在一个县的用户的时候显示一个工具提示。 当我在SVG地图上添加它时,我可以让鼠标飞到鼠标,但我想让它在它盘旋的时候显示。 这是执行的代码(javascript jsx) 是否有可能将SCSS“盘旋”属性作为“工具提示”属性的属性,而不是编写内联样式?我试着给它一个类名属性,但它没有读它。 另外,这里是同一个jsx文件中的事件处理程序。

.svg-map {
  width: 100%;
  height: auto;
  stroke: #666;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  &__location {
    fill: #a1d99b;
    cursor: pointer;
    &:focus,
    &:hover {
      fill: #b8e2b3;
      outline: 0;
        &tooltip {
          font-size: 24;
          position: fixed;
          width: 440px;
          padding: 10px;
          border: 1px solid white;
          background-color: white;
        }
    }
    &[aria-checked='true'] {
      fill: #f4bc44;
    }
  }
}


    render() {
        return (
            <Tooltip className='tooltip' title={<h3 style={{color:"white", background:"grey"}}>{countyName}</h3>} arrow>
                <article className="examples__block">
                    <div className="examples__block__map">
                        <CheckboxSVGMap
                            map={Ohio}
                            onLocationMouseOver={this.handleLocationMouseOver}
                            onLocationMouseOut={this.handleLocationMouseOut}
                            onLocationFocus={this.handleLocationFocus}
                            onLocationBlur={this.handleLocationBlur}
                            onChange={this.props.onChange}
                        />
                    </div>
                </article>
            </Tooltip>
        );
    }

    constructor(props) {
        super(props);
        this.state = {
            pointedLocation: null,
            focusedLocation: null,
            selectedLocations: []
        };
        this.handleLocationMouseOver = this.handleLocationMouseOver.bind(this);
        this.handleLocationMouseOut = this.handleLocationMouseOut.bind(this);
        this.handleLocationFocus = this.handleLocationFocus.bind(this);
        this.handleLocationBlur = this.handleLocationBlur.bind(this);
        this.handleOnChange = this.handleOnChange.bind(this);
    }
    handleLocationMouseOver(event) {
        const pointedLocation = getLocationName(event);
        this.setState({ pointedLocation });
        console.log('mouse over.. test..' + pointedLocation);
        countyName = pointedLocation;
        return pointedLocation;//this should return the tooltip when county gets hovered
    }
    handleLocationMouseOut() {
        this.setState({ pointedLocation: null });
        console.log('mouse out')
    }
    handleLocationFocus(event) {
        const focusedLocation = getLocationName(event);
        this.setState({ focusedLocation });
        console.log('mouse focus')
    }
    handleLocationBlur() {
        this.setState({ focusedLocation: null });
    }
    handleOnChange(selectedNodes) {
    console.log('on change')
        this.setState(prevState => {
            return {
                ...prevState,
                selectedLocations: selectedNodes.map(node => node.attributes.name.value)
            };
        });
    }

▼版权说明

相关文章也很精彩
推荐内容
更多标签
相关热门
全站排行
随便看看

错说cuoshuo.com——程序员的报错记录

部分内容根据CC版权协议转载,如果您希望取消转载请发送邮件到cuoshuo8@163.com

辽ICP备19011660号-5