ToolTipをCSSだけで出せるのがあったのでやってみました

使いやすそうなTooltipが欲しかったので
探してみた結果、良さそうなのが codrops    にありました。
いろいろあるのですが、１つ動作させてみます
表示は View demo   で確認できます
codrops   のDownload souceから落として解凍します
あとは目的のcssを読み込んで使用するだけです

Sample

夏目漱石 1867年2月9日（慶応3年1月5日） - 1916年（大正5年）12月9日）は、日本の小説家、評論家、英文学者。本名、金之助（きんのすけ）。江戸の牛込馬場下横町（現在の東京都新宿区喜久井町）出身。俳号は愚陀仏。 wiki と 正岡子規 1867年10月14日（慶応3年9月17日） - 1902年（明治35年）9月19日）は、日本の俳人、歌人、国語学研究家。名は常規（つねのり）。幼名は処之助（ところのすけ）で、のちに升（のぼる）と改めた。 wiki

今回はダウンロードした中のtooltip-classic.cssをちょっとだけ変更してます
html は以下のようにします。

      <p class="tooltips">
        <span class="tooltip tooltip-effect-4">
          <span class="tooltip-item">ここにマウスをもってくると表示</span>
          <span class="tooltip-content clearfix">
            <img src="画像" />
            <span class="tooltip-text">tooltipの中身
              <a href="tooltip内のリンクURL">wiki</a>
            </span>
          </span>
        </span>
      </p>
    

cssだけでできるのは有難いですね
最近のブラウザであればどれでも動くと思います。