ツールチップ：テーブルのツールチップを中心に

Question

特定のフィールドを持つテーブルがあります。データの長さにかかわらず、データツールチップをtdの中心にしたいと思っています。

table tbody td { 
 
width:100px; 
 
max-width:130px; 
 
white-space: nowrap; 
 
    text-overflow: ellipsis; 
 
    overflow-x: hidden; 
 
}  
 
    
 
    [data-tooltip] { 
 
       position: relative; 
 
       z-index: 1000000 !important; 
 
       cursor: pointer; 
 
       margin: 0 auto; 
 
      } 
 

 
      /* Hide the tooltip content by default */ 
 
      [data-tooltip]:before, 
 
      [data-tooltip]:after { 
 
       visibility: visible; 
 
       -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
 
       filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
 
       opacity: 1; 
 
       pointer-events: none; 
 
       transition: all 0.5s ease-out; 
 
      } 
 

 
      /* Position tooltip above the element */ 
 
      [data-tooltip]:before { 
 
       position: absolute; 
 
       top: -60%; 
 
       margin-bottom: 5px; 
 
       padding: 5px 10px; 
 
       width: auto; 
 
       -webkit-border-radius: 3px; 
 
       -moz-border-radius: 3px; 
 
       border-radius: 3px; 
 
       background-color: #000; 
 
       background-color: hsla(0, 0%, 20%, 0.9); 
 
       color: #fff; 
 
       content: attr(data-tooltip); 
 
       text-align: center; 
 
       font-size: 11px; 
 
       line-height: 1.2; 
 
      } 
 

 
      /* Triangle hack to make tooltip look like a speech bubble */ 
 
      [data-tooltip]:after { 
 
       position: absolute; 
 
       top: 5%; 
 
       left: 50%; 
 
       transform: translateX(50%); 
 
       width: 0; 
 
       border-top: 5px solid #000; 
 
       border-top: 5px solid hsla(0, 0%, 20%, 0.9); 
 
       border-right: 5px solid transparent; 
 
       border-left: 5px solid transparent; 
 
       content: " "; 
 
       font-size: 0; 
 
       line-height: 0; 
 
      } 
 

 
      /* Show tooltip content on hover */ 
 
      [data-tooltip]:hover:before, 
 
      [data-tooltip]:hover:after { 
 
       visibility: visible; 
 
       -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; 
 
       filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)"; 
 
       opacity: 1; 
 
       transition: all 0.5s ease-in; 
 
      }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<div class="table-responsive"> 
 
<table class="table"> 
 
<thead> 
 
<tr> 
 
<th>Caption 1</th> 
 
<th>Caption 2</th> 
 
<th>Caption 3</th> 
 
<th>Caption 4</th> 
 
<th>Caption 5</th> 
 
<th>Caption 6</th> 
 
</tr> 
 
</thead> 
 
<tbody> 
 
<tr> 
 
<td >Some data Some data Some data Some data </td> 
 

 
<td data-tooltip="Some data Some data Some data Some data">Some data Some data Some data Some data </td> 
 

 
<td >Some data Some data Some data Some data </td> 
 

 
<td >Some data Some data Some data Some data </td> 
 

 
<td >Some data Some data Some data Some data </td> 
 

 
<td >Some data Some data Some data Some data </td> 
 
</tr> 
 
</tbody> 
 
</table> 
 
</div>

私はデータ・ツールチップは関係なく、それが取るどのくらいのスペースTDの中心にならないようにしたいです。

助けがあれば助かります。

ありがとうございます。要素のスタイルで、このCSSフラグメントを追加

Answer 1

table tbody td { 
 
width:100px; 
 
max-width:130px; 
 
white-space: nowrap; 
 
    text-overflow: ellipsis; 
 
    overflow-x: hidden; 
 
}  
 
    
 
    [data-tooltip] { 
 
       position: relative; 
 
       z-index: 1000000 !important; 
 
       cursor: pointer; 
 
       margin: 0 auto; 
 
      } 
 

 
      /* Hide the tooltip content by default */ 
 
      [data-tooltip]:before, 
 
      [data-tooltip]:after { 
 
       visibility: visible; 
 
       -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
 
       filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
 
       opacity: 1; 
 
       pointer-events: none; 
 
       transition: all 0.5s ease-out; 
 
      } 
 

 
      /* Position tooltip above the element */ 
 
      [data-tooltip]:before { 
 
       position: absolute; 
 
       top: -60%; 
 
       padding: 5px 10px; 
 
       width: auto; 
 
       left: 50%; 
 
       transform: translateX(-50%); 
 
       margin: 0 auto; 
 
       -webkit-border-radius: 3px; 
 
       -moz-border-radius: 3px; 
 
       border-radius: 3px; 
 
       background-color: #000; 
 
       background-color: hsla(0, 0%, 20%, 0.9); 
 
       color: #fff; 
 
       content: attr(data-tooltip); 
 
       text-align: center; 
 
       font-size: 11px; 
 
       line-height: 1.2; 
 
      } 
 

 
      /* Triangle hack to make tooltip look like a speech bubble */ 
 
      [data-tooltip]:after { 
 
       position: absolute; 
 
       top: 5%; 
 
       left: 50%; 
 
       transform: translateX(-50%); 
 
       width: 0; 
 
       border-top: 5px solid #000; 
 
       border-top: 5px solid hsla(0, 0%, 20%, 0.9); 
 
       border-right: 5px solid transparent; 
 
       border-left: 5px solid transparent; 
 
       content: " "; 
 
       font-size: 0; 
 
       line-height: 0; 
 
      } 
 

 
      /* Show tooltip content on hover */ 
 
      [data-tooltip]:hover:before, 
 
      [data-tooltip]:hover:after { 
 
       visibility: visible; 
 
       -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; 
 
       filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)"; 
 
       opacity: 1; 
 
       transition: all 0.5s ease-in; 
 
      }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<div class="table-responsive"> 
 
<table class="table"> 
 
<thead> 
 
<tr> 
 
<th>Caption 1</th> 
 
<th>Caption 2</th> 
 
<th>Caption 3</th> 
 
<th>Caption 4</th> 
 
<th>Caption 5</th> 
 
<th>Caption 6</th> 
 
</tr> 
 
</thead> 
 
<tbody> 
 
<tr> 
 
<td >Some data Some data Some data Some data </td> 
 

 
<td data-tooltip="Some data Some data Some data Some data">Some data Some data Some data Some data </td> 
 

 
<td >Some data Some data Some data Some data </td> 
 

 
<td >Some data Some data Some data Some data </td> 
 

 
<td >Some data Some data Some data Some data </td> 
 

 
<td >Some data Some data Some data Some data </td> 
 
</tr> 
 
</tbody> 
 
</table> 
 
</div>

これを試してみてください。

これが役に立ちます。

Answer 2

試してみてください。

left:30%