質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.03%

CSSでツールチップを作りたいけど記述が途中から反映されていない

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 1,297

lino

score 12

タイトル通りです。デベロッパーツールにてURLを短縮するCSSは効いてるのですが、ツールチップのCSSが効いていません。何故でしょうか?

http://potepote.tokyo/2018/08/07/test1/

説明不足で申し訳ございません。以下追記です。

短縮するURLそのものにカーソルを合わせたときに吹き出しが出て、全てのURLが出てくるようにしたいのですが、効いていません。

Chromeのデベロッパーツールで見ました。

<div class="tooltip">
https://www.mitsubishi-shokuhin.com/confectionery/haribo/
</div>
/* 表示文字の装飾 */
div.tooltip{
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;                        /* インライン要素化 */
  border-bottom:dashed 1px #555;
}

/* ツールチップ部分を隠す */
div.tooltip span {
    display: none;
}

/* マウスオーバー */
div.tooltip:hover {
    position: relative;
    color: #333;
}

/* マウスオーバー時にツールチップを表示 */
div.tooltip:hover span {
    display: block;                  /* ボックス要素にする */
    position: absolute;            /* relativeからの絶対位置 */
    top: 25px;
    font-size: 90%;
    color: #fff;
    background-color: #51A2C1;
    width: 205px;
    padding: 5px;
    border-radius:3px;
    z-index:100;
}

/* フキダシ部分を作成 */
div.tooltip span:before{
    content:''; 
    display:block; 
    position:absolute;                         /* relativeからの絶対位置 */
    height:0; 
    width:0; 
    top:-13px; 
    left:15px;
    border:13px transparent solid; 
    border-right-width:0; 
    border-left-color:#51A2C1; 
    transform:rotate(270deg);            /* 傾きをつける */
    -webkit-transform:rotate(270deg);
    -o-transform:rotate(270deg);
    z-index:100;
}

以上で、情報不足はございませんか?

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • namda

    2018/08/07 13:17

    HTMLとCSSを載せてください。デベロッパーツールは何のデベロッパーツールですか?短縮するURLはCSSとどんな関係が有るんですか?

    キャンセル

  • liveasnotes

    2018/08/07 14:16

    「URLを短縮するURL」...意味上のエラーがあります.正しい文章に直してください.また投稿前に文章の校正を行ってください/「ツールチップのCSSが効いていません。何故でしょうか」...どんなHTML,CSSを書いたのか示してください.コードの挿入方法はこちらを参照してください:https://twitter.com/wakame1367/status/983955540530282504

    キャンセル

  • dit.

    2018/08/08 11:36

    HTML内にspanの記述がありませんが、JSか何かで生成しているのでしょうか?であればそちらの記述もお願いします。

    キャンセル

  • lino

    2018/08/09 16:34

    ditさんご回答ありがとうございます。JSか何かで生成しているかもしれませんが把握していません。知識がないのでCSSだけで何とかやりたいです。

    キャンセル

回答 3

checkベストアンサー

+1

<span>が無いと非表示/表示切り替えの意味がなくなるのでdiv内に同じ文字列を<span>で囲って追記。
おそらくdiv.tooltip:hoverposition: relative;を消すだけでも表示はされるような気がします。
せっかく「長い文字列をすべて表示」したいのにdiv.tooltip:hover spanwidth: 205px;で幅を狭くしているのももったいないです。
div.tooltip:hover spantop: 25px;があると元の文字にかぶってしまうのでそれも削除。
以上を踏まえてこれでどうなりますか?

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<style>
/* 表示文字の装飾 */
div.tooltip{
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;                        /* インライン要素化 */
  border-bottom:dashed 1px #555;
}

/* ツールチップ部分を隠す */
div.tooltip span {
    display: none;
}

/* マウスオーバー */
div.tooltip:hover {
    color: #333;
}

/* マウスオーバー時にツールチップを表示 */
div.tooltip:hover span {
    display: block;                  /* ボックス要素にする */
    position: absolute;            /* relativeからの絶対位置 */
    font-size: 90%;
    color: #fff;
    background-color: #51A2C1;
    padding: 5px;
    border-radius:3px;
    z-index:100;
}

/* フキダシ部分を作成 */
div.tooltip span:before{
    content:''; 
    display:block; 
    position:absolute;                         /* relativeからの絶対位置 */
    height:0; 
    width:0; 
    top:-13px; 
    left:15px;
    border:13px transparent solid; 
    border-right-width:0; 
    border-left-color:#51A2C1; 
    transform:rotate(270deg);            /* 傾きをつける */
    -webkit-transform:rotate(270deg);
    -o-transform:rotate(270deg);
    z-index:100;
}
</style>
</head>
<body>
<div class="tooltip">
  https://www.mitsubishi-shokuhin.com/confectionery/haribo/
  <span>https://www.mitsubishi-shokuhin.com/confectionery/haribo/</span>
</div>
</body>
</html>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/08/09 16:38

    ありがとうございます!本当に助かりました。

    キャンセル

0

正攻法は既にdit.さんの回答で示されていると思うので,
私はHTMLを書かずにCSSだけで解決しちゃう方法を紹介したいと思います!

https://thimbleprojects.org/liveasnotes/530805/
(右上のリミックスボタンでソースの閲覧・編集等ができます)
cssとじゃれるgif



 ポイント

  1. aタグの中の文字サイズをゼロにする(テキストノードの非表示)
  2. aタグのvertical-alignを設定する(今回はtop
  3. aタグのhrefを::before擬似要素で表示する(content: attr(href)
    ・その際,文字サイズをpタグの文字サイズに合わせる
    ・また,予め:root擬似クラスで文字サイズを設定しておく
  4. 残りの::after擬似要素だけでツールチップを作る
    ・文字サイズをpタグの文字サイズに合わせる
    ・吹き出し部分を付けたい「辺」に,余白を多めにつける(その分が吹きだしのサイズ)
    ・背景画像をlinear-graient()radial-gradient()で作成し,配置する
    ・背景画像の複数指定の際,background-sizebackground-positionは,できるだけ固定値ではなく,%calc()を使い,汎用性を高める


 実装方法(デモ)

これ(↓)に

<p>
  This page's url (
  <a href="https://teratail.com/questions/139983" class="lnk">https://teratail.com/questions/139983</a>
  ) is targeting on this page.
</p>

これ(↓)をかけるだけです

:root{
  font-size: 18px;
}
p{
  font-size: 1rem;
}

.lnk:link,
.lnk:visited,
.lnk:hover,
.lnk:active{
  position: relative;
  display: inline-block;
  max-width: 10rem;
  color: currentColor;
  font-size: 0;
  text-decoration: none;
  border-bottom: dashed 1px gray;
  vertical-align: top;
}
.lnk::before{/*show target location*/
  content: attr(href);
  display: block;
  overflow-x: hidden;
  font-size: 1rem;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.lnk:hover::after,
.lnk:active::after{/*show tooltip*/
  content: attr(href);
  display: block;
  position: absolute;
  z-index: 1;
  top: calc(100% - 3px);
  padding: 10px 5px 5px;
  color: #fff;
  font-size: 1rem;
  background-image:
    linear-gradient(-45deg, #51A2C1 0%, #51A2C1 50%, rgba(255,255,255,0) 51%),
    linear-gradient(45deg, #51A2C1 0%, #51A2C1 50%, rgba(255,255,255,0) 51%),
    linear-gradient(#51A2C1 0%, #51A2C1 100%),
    linear-gradient(#51A2C1 0%, #51A2C1 100%),
    radial-gradient(closest-side, #51A2C1 100%, rgba(255,255,255,0)),
    radial-gradient(closest-side, #51A2C1 100%, rgba(255,255,255,0)),
    radial-gradient(closest-side, #51A2C1 100%, rgba(255,255,255,0)),
    radial-gradient(closest-side, #51A2C1 100%, rgba(255,255,255,0));
  background-position:
    10px 0,
    18px 0,
    5px 8px,
    0 13px,
    0 8px,
    100% 8px,
    100% 100%,
    0 100%;
  background-size:
    8px 8px,
    8px 8px,
    calc(100% - 10px) 100%,
    100% calc(100% - 18px),
    10px 10px,
    10px 10px,
    10px 10px,
    10px 10px;
  background-repeat: no-repeat;
}

これでHTMLを編集できないときでも,
このCSSを当てて,セレクタの名前やプロパティ値を編集すれば,
無事ツールチップが表示できるようになりますね!

ぜひお試しください!^^


参考:

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/08/09 16:32

    ご丁寧に本当にありがとうございます!実際教えていただいた半分以上意味が分かっていないのですが、ひとまずコードを実装したら出ました。リンクは張りたくなく、ツールチップを表示するだけで良いのですが、その場合どう書けばいいのでしょうか?

    キャンセル

  • 2018/08/09 18:31

    ざっくりですが,別回答で出しときました↓
    https://teratail.com/questions/139983#reply-212388

    キャンセル

0

リンクは張りたくなく、ツールチップを表示するだけで良いのですが、その場合どう書けばいいのでしょうか?

URLなのにハイパーリンクを設定しない理由がいまいち分かりませんが,一応書いておくと,

<div class="has_tooltip" data-desc="ツールチップとは?Wikipediaにはこう書かれている">
  ツールチップとは?アンサイクロペディアにはこう書かれている:
</div>
.has_tooltip{
  position: relative;
  display: inline-block;
  font-size: 0;
  vertical-align: top;
  /*以下,装飾*/
  max-width: 12rem;
  color: currentColor;
  border: 1px solid red;
  padding: .5rem;
}
.has_tooltip::before{
  content: attr(data-desc);
  display: block;
  overflow-x: hidden;
  font-size: 1rem;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.has_tooltip:hover::after{
  content: '"The tooltip or infotip or a hint is a common graphical user interface element. It is used in conjunction with a cursor, usually a pointer. The user hovers the pointer over an item, without clicking it, and a tooltip may appear—a small "hover box" with information about the item being hovered over.[1][2] Tooltips do not usually appear on mobile operating systems, because there is no cursor (though tooltips may be displayed when using a mouse)." via Wikipedia';
  font-size: 1rem;
  /*以下,装飾*/
  position: absolute;
  display: block;
  top: 2rem;
  left: 2rem;
  width: 20rem;
  padding: .5rem;
  background: #fff;
  border: 1px solid gray;
  border-radius: 10px;
}


という感じですかね

data-desc

擬似要素を使うと

<div>
  ::before
  あいうえお
  ::after
</div>

という感じに配置されるので,

・要素内の文字サイズを0にすることで,擬似的に元のテキストを削除
spanで囲う代わりに,text-overflow関連のプロパティを::before擬似要素のみにかけ,::before擬似要素内にdata-desc属性(※今作ったオリジナルの属性)の値を放り込む
::after擬似クラスでツールチップを作成
の3つを押さえれば,要素1つでツールチップまでできます


 余談

そういえば,これ(↓)を説明し忘れていましたね
もしデフォルトのものでよければ,

<div title="これがツールチップの中身だよ!">ここにマウスを乗せて!</div>


でできます

title_attr

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/08/09 18:36

    擬似クラスや属性値を使うCSSは,最初は難しく感じるかもしれませんが,慣れると結構使い勝手が良いので,ぜひ色々試してほしいです

    キャンセル

  • 2018/08/11 11:32

    ありがとうございます。URLにハイパーリンクを張ると、外に人が流れやすくなるのとリンクジュースを流したくないので、通常はただのテキスト表示にしています。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.03%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる