Ajaxの処理が終わった後にボタンの上にツールチップを表示する方法

ボタンを押した後にAjaxの処理がはしるのですが、完了がわかりにくい！ということでTooltipを簡単な方法で表示することにしました

jqueryでツールチップMicrotipを表示・非表示してみる

ツールチップは軽量のMicrotipを使います。マウスオーバーでツールチップが表示されるものですが今回はjqueryで表示を制御したいと思います。まずはダウンロードしたCSSファイルを読み込みます。

Microtip - Modern, lightweight css tooptips. 1kb only

A modern, ultra lightweight css tooptip library. Just `1kb` minified and gzipped.

ghosh.github.io

<link rel='stylesheet' id='style-microtip-css'  href='https://artdoors.net/wp-content/themes/affinger5-child/css/microtip.css?ver=5.7.1' type='text/css' media='all' />

ボタンにアトリビュートを追加

ボタンタグにaria-label以外のアトリビュートを追加します。このままではマウスオーバーしても何も表示されません。

<button id="btnregist" class="btnReviewload" data-microtip-position="top-right" role="tooltip">登録</button>

ajax処理完了でaria-labelアトリビュートを追加

ajax送信の処理をまってaria-labelアトリビュートを追加します。Wordpressで使用したのでjQueryです。

jQuery('#btnregist').on('click', function() {
	var fd = new FormData();
	fd.append('action', 'regist_review');
	fd.append('postid', 00000);
    jQuery.ajax({
        type: 'POST',
        url: ajaxurl,
        data: fd,
    processData: false,
    contentType: false,
        success: function( response ){
        },
	}).done(function(data){

		jQuery('#btnregist').attr('aria-label', '登録しました!');
		setTimeout(function(){
			jQuery('#btnregist').removeAttr('aria-label');
		},1000);
	});
});

aria-labelアトリビュートをボタンに追加することで、ツールチップが表示されます。最後の部分のsetTimeoutの処理で再度非表示にするために追加したaria-labelを削除しています。工夫することで簡単にやりたいことが実現できました。