How to add a tooltip for MediaReplaceFlow from @wordpress/block-editor

Question

Within my custom Gutenberg block plugin, I have the following MediaReplaceFlow (inside of my return statement), that is working for replacing an image if an editor so desires to do so…

...

  <BlockControls group="inline">
        <div className={ `mg-block-item-img-replacer` }>
            <MediaReplaceFlow
                name={ __( 'Replace Image', 'mg-block-item' ) }
                onSelect={ onSelectImage }
                onSelectURL={ onSelectImageURL }
                onError={ onUploadError }
                accept="image/*"
                allowedTypes={ [ 'image' ] }
                mediaId={ id }
                mediaURL={ url }
            />
        </div>
  </BlockControls>

...

I also added some custom .scss so that it reflects an icon in place of its text, like so…

/* REPLACE IMAGE ICON INSTEAD OF TEXT, SETUP */
.mg-block-item-img-replacer button {
    font-size: 0 !important;

    &::after {
        font-family: dashicons;
        content: "\f515";
        color: #6a5acd;
        -webkit-font-smoothing: antialiased;
        font-size: 1.25rem;
        position: relative;
        top: 0.8rem;
        height: 50px;
    }
}

With the above setup, is it possible for me to also apply a tooltip, so that when users hovers over this icon for Replacing the image, they will see a tooltip?

I tried the following with the Tooltip component, but it does not work…

<BlockControls group="inline">
        <div className={ `mg-block-item-img-replacer` }>
        <Tooltip text={ __( 'Replace Image', 'mg-block-item' ) }>
            <MediaReplaceFlow
                name={ __( 'Replace Image', 'mg-block-item' ) }
                onSelect={ onSelectImage }
                onSelectURL={ onSelectImageURL }
                onError={ onUploadError }
                accept="image/*"
                allowedTypes={ [ 'image' ] }
                mediaId={ id }
                mediaURL={ url }
            />
            </Tooltip>
        </div>
    </BlockControls>

Perhaps there is a CSS workaround I can apply? Thanks for any suggestions!

0
klewis 4 months 2023-06-02T08:35:36-05:00 0 Answers 0 views 0

Leave an answer

Browse
Browse