スパムに表示されるツールチップのスタイリング

Question

ツールチップを表示するためのtitle属性のスパンがあります。これはデフォルトのツールチップを表示しています。しかし、私はツールヒントを、黒の背景色aと白のテキスト色を持つツールチップとして表示する必要があります。
どうすればいいですか？

マイスパンHTMLを使用すると、新しいツールチップの要素を作成するために、あなたのCSSにタイトルテキストを使用する必要があります。この

<span class="bootstrap-switch-handle-on bootstrap-switch-success" 
     title="my span tooltip" style="width: 42px;">ON</span> 

おかげで、よろしく

Answer 1

のように見えます。あなたは新しいエルを追加する必要はありません。ダブルツールヒントを避けるために、タイトルの代わりにdata-titleを使用すると

span:hover:after{ 
content: attr(data-title); 
display:block; 
//more width, height, background etc. here 
} 

：ただ、このようなのような擬似セレクタを使用しています。 https://jsfiddle.net/nyybsu1o/2/

Answer 2

参考：https://www.w3schools.com/css/tryit.asp?filename=trycss_tooltip

.tooltip { 
 
    position: relative; 
 
    display: inline-block; 
 
    border-bottom: 1px dotted black; 
 
} 
 

 
.tooltip .tooltiptext { 
 
    visibility: hidden; 
 
    width: 120px; 
 
    background-color: black; 
 
    color: #fff; 
 
    text-align: center; 
 
    border-radius: 6px; 
 
    padding: 5px 0; 
 

 
    /* Position the tooltip */ 
 
    position: absolute; 
 
    z-index: 1; 
 
} 
 

 
.tooltip:hover .tooltiptext { 
 
    visibility: visible; 
 
}

<div class="tooltip">Hover over me 
 
    <span class="tooltiptext">Tooltip text</span> 
 
</div>

Answer 3

私はこのすでにあなたとそれを共有し、ここで行っていた。ここ

はフィドルです。それはitamarが答えたようなかなりのテクニックを使っていますが、化粧品を付け加えたほうが少し好きです。必要に応じてさらに改善することができます。

ここにある：

.tooltip { 
 
    border-bottom: 1px dotted; 
 
    position: relative; 
 
} 
 

 
.tooltip:after { 
 
    position: absolute; 
 
} 
 

 
.tooltip:hover:after { 
 
    top: 100%; 
 
    left: 0; 
 
    content: attr(data-tooltip); 
 
    padding: .5em; 
 
    min-width: 100px; 
 
    max-width: 350px; 
 
    background-color: #333; 
 
    color: rgba(255, 255, 255, .75); 
 
    border-radius: .25em; 
 
}

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus autem ipsum, culpa cum cumque perferendis, non, nisi a sint debitis eaque sit? Ratione vel aliquid eos, accusamus alias id perferendis.</p> 
 
<p>Iusto ipsum laudantium sint, soluta necessitatibus alias, aperiam, iste nisi <span class="tooltip" data-tooltip="Illum possimus voluptas aperiam">consequuntur odit</span> culpa minima deserunt ipsa corrupti pariatur tempore enim expedita dignissimos maiores 
 
    tenetur non dicta unde autem velit vitae.</p> 
 
<p>Consectetur placeat veniam <span class="tooltip" data-tooltip="Cupiditate officia adipisci necessitatibus consectetur voluptates, tempore, aspernatur.">nobis excepturi</span> minus explicabo accusantium, nulla. Ducimus sequi quia consequuntur temporibus sapiente recusandae expedita ad voluptatum facere fugit, velit asperiores illum possimus voluptas aperiam nemo. Tenetur, ut.</p> 
 
<p>Possimus impedit commodi amet fugiat, eligendi, nesciunt, labore natus ipsum vel nihil rem pariatur accusamus non at tenetur nobis est. Voluptas natus itaque, neque distinctio numquam animi velit, totam voluptatum.</p> 
 
<p>Cumque temporibus blanditiis <span class="tooltip" data-tooltip="Voluptates provident non distinctio porro sit asperiores minus, quia molestias, animi sapiente suscipit maiores labore? Ipsa excepturi, possimus!">et ullam nam</span> asperiores reiciendis 
 
    odit natus, voluptates. Cupiditate officia adipisci necessitatibus iste quos pariatur corrupti, sapiente in maxime commodi? Accusantium consectetur voluptates, tempore, aspernatur quibusdam similique.</p>

私はそれが有用だった願っています。乾杯！

編集：Ballons.cssをご覧ください。具体的には、何も使用せずにCSSだけを使用してツールチップを描画するためのものです。