HTML で超簡単に手っ取り早くツールチップを表示する。

ツールチップとは、マウスを上に置いたときに表示される補足情報です。 今回は、超簡単にツールチップを表示する方法を紹介します。

abbr タグで実装する

abbr タグは、略語を示すときに使用されるHTMLタグです。「abbr」は「abbreviation」の略で、「省略」「短縮」「略語」などの意味があります。

↓にマウスを置くと、ツールチップが表示されます。

UsefulEdgeとは?

<abbr title="Useful Edgeは、システム開発やライフハックな情報を発信します。">UsefulEdgeとは?</abbr>

表の場合は td タグ に title 属性で定義する

WWW

HTML

<table border="1">
<tr>
    <td title="World Wide Web">WWW</td>
    <td title="Hyper Text Markup Language">HTML</td>
</tr>
</table>

Bootstrap で実装する

NPM

Bootstrap の場合は、の後ろに以下の Javascript が必要です。

    $(function () {
        $('[data-toggle="tooltip"]').tooltip()
    })

ツールチップは以下のように書きます。

    <p data-toggle="tooltip" data-placement="top" title="Niggling Pant Monkey" style="width: 50px; padding: 3px 50px;">
        NPM
    </p>

速攻でメモできる QuickNote リリースしました!

QuickNoteは動作が超軽量でサクサクかけるノートアプリです。一瞬の閃きを逃さずにノートを開き書き始めることができます。 アカウント登録も不要です。お試しあれ!

Excel操作をコマンドで! proBoarderExcel

Excelはマウスで操作するのが基本ですが、マウス操作に疲れてはいませんか? キーボードでExcel操作ができるようになるアプリです。オープンソースで無料です。

積み上げ! Daily Stack リリースしました!

Daily Stack は日々の積み上げを管理するToDoアプリです。過去の積み上げの振り返りだけでなく、ツイート機能もあります。 アカウント登録不要ですぐに使い始めることができます。

ExecNote.app リリースしました!

ExecNoteは、コードが実行できるMarkdownアプリケーションです。Markdownドキュメント内に記載したコードをクリックすると実行ができます。わざわざターミナルを 起動させる必要がありません!無料ですのでもしよければダウンロードをお願いします。

About Me

11年目のシステムエンジニアです。アプリで生活や仕事を改善したい🐱仕事効率化、自動化のアプリ開発が得意です、ご相談ください。 🚀エンタメ系アプリの開発も模索中🐬社内SEや個人アプリ開発者、システムエンジニアになりたい人と繋がりたい🐱