How to add a tooltip for MediaReplaceFlow from @wordpress/block-editor
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!
Leave an answer