1

ハイパーリンクにカーソルを合わせると、ツールチップが表示されますが、表示されません。ハイパーリンクの数インチ下に表示されます。インターネットのデモからコードを取得しました。

ハイパーリンクのすぐ下にツールチップを表示するにはどうすればよいですか?

使用したPHPコードは次のとおりです。

if ($teller == 3) {
    echo '<p><a href="#" class="tooltip">...<span>';

    foreach ($bericht->datums as $date) {
        echo date('d/m/Y', strtotime($date->datum)) . ' om ' . date('H:i', strtotime($date->beginUur)) . '<br />';
    }

        echo '</span></a></p>';
    }

上記のコードは、HTMLで次のコードを生成しました。

<p>
   <a href="#" class="tooltip">...
      <span>
         13/04/2013 om 13:49<br />
         15/04/2013 om 12:50<br />
         29/04/2013 om 16:00<br />
      </span>
   </a>
 </p>

これに属するCSSは次のとおりです。

a.tooltip span {
    position:absolute;
    z-index: 999;
    white-space:nowrap;
    bottom:9999px;    
    background:#81b0b0;
    color:#e0e0e0;
    padding:5px 12px;
    line-height: 24px;
    height: auto;
    opacity: 0;
    transition:opacity 0.5s ease-out;
    }

a.tooltip span::before {
    content: "";
    display: block;
    border-left: 6px solid #81b0b0;
    border-top: 6px solid transparent;
    position: absolute;
    top: -6px;
    left: 0px;
}

a.tooltip:link {
    color:#FFF;
}

a.tooltip:visited {
    color:#FFF;
}

a.tooltip:hover span {
    opacity: 1;
    bottom:-35px;
    }

誰か助けてくれませんか？ありがとう！;)

4

1 に答える 1

1

使用するとき

position:absolute;

位置が設定されているチェーン内の最も近いコンテナーに対して配置されます。したがって、それを含む要素またはその親のいずれにも位置が設定されていない場合、それはボディに対して配置されます。

含まれている p タグに絶対位置または相対位置を付けてみてください

于 2013-04-13T14:36:28.403 に答える