Javascript

【Javascript】マウスオーバーのツールチップスクリプトTooltip

February 25, 2017
tooltip.js

Tooltip.jsはツールチップ機能を追加スクリプト。ツールチップは、title属性を読み出すことによって各要素に対して作成されます。

HTML

<html>
    <head>
        <script src="Tooltip.js" type="text/javascript"></script>
    </head>

    <body>
        <div data-tooltip title="I'm a tooltip text">Demo</div>
    </body>
</html>

CSSクラスを定義する追加のオプションを指定

<div data-tooltip="{ 'offset': 10, 'class': 'alt-tooltip' }" title="I'm a tooltip text">Demo</div>

JavaScript

tooltip.setOptions({
    tooltipId: "example",
    offsetDefault: 20
});

ツールチップ要素を動的に追加したり、後でオプション/テキストを更新する場合に必要

tooltip.refresh();

CSS

#tooltip {
    position:absolute;
    background:#DB2A64;
    color:#ffffff;
    padding:8px;
}

MIT