jqueryなしでtitle属性を使用してカスタムツールチップを作成する方法

Question

写真のようにツールチップを作成したいと思います。タイトルタグの値はコントローラから来ています。

これは私のテーブルコードです：

<table border="1" cellpadding="10"> 
    <tbody style="white-space: nowrap;"> 
    <tr ng-repeat="row in rows"> 
     <td style="width: 2%;"> 
     <input type="checkbox" 
       ng-model="tableSelection[$index]" 
       style="margin-left: 10px;"> 
     </td> 
     <td style="font-size: smaller; width: 27%; color: gray; white-space: nowrap;" 
      ng-repeat="col in input_columns" 
      droppable="dropable" 
      drop-fn="drop" 
      drop-index="$index" 
      drop-data="col" 
      title="" 
      ng-click="openDialog($event,$index)" 
      tempValue="">&lt;enter data&gt;</td> 

     <td style="font-size: smaller; width: 27%; color: gray; white-space: nowrap;" 
      ng-repeat="col in output_columns" 
      droppable="dropable" 
      drop-fn="dropOutput" 
      drop-index="$index" 
      drop-data="col" 
      title="" 
      ng-click="openDialogOutputConst($event,$index)">&lt;enter data&gt;</td> 
    </tr> 
    </tbody> 
</table> 

誰もがこのようなツールチップを提供するために、どのように私を助けることができます。

Answer 1

これは何か？

td { 
 
    position: relative; 
 
} 
 

 
td:hover:before { 
 
    content: attr(data-title); 
 
    position: absolute; 
 
    background-color: yellow; 
 
    top: 100%; 
 
    width: 200px; 
 
    white-space: normal; 
 
    word-spacing: 200px; 
 
}

<table border="1" cellpadding="10"> 
 
    <tbody style="white-space: nowrap;"> 
 
    <tr ng-repeat="row in rows"> 
 
     <td style="width: 2%;"> 
 
     <input type="checkbox" ng-model="tableSelection[$index]" style="margin-left: 10px;"> 
 
     </td> 
 
     <td style="font-size: smaller; width: 27%; color: gray; white-space: nowrap;" ng-repeat="col in input_columns" droppable="dropable" drop-fn="drop" drop-index="$index" drop-data="col" data-title="Idaho Illinois Indiana Iowa Kansas Missouri Nebraska Ohio" 
 
     ng-click="openDialog($event,$index)" tempValue="">&lt;enter data&gt;</td> 
 

 
     <td style="font-size: smaller; width: 27%; color: gray; white-space: nowrap;" ng-repeat="col in output_columns" droppable="dropable" drop-fn="dropOutput" drop-index="$index" drop-data="col" data-title="Some text here" ng-click="openDialogOutputConst($event,$index)">&lt;enter data&gt;</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 2

あなたは:before:afterと協力し、いくつかの手動位置合わせを行うことができます。

ストロークとして:beforeを使用し、ツールチップに:afterを使用します。このようなものを作ることができます。

body { 
    margin-top: 100px; 
} 

.item { 
    position: relative; 

    display: inline-block; 
    padding: 20px; 

    background: #fff; 
    border: 2px solid crimson; 

    // the stroke 
    // and the tooltip 
    // hide them by default 
    &:before, 
    &:after { 
    content: ''; 
    position: absolute; 
    display: none; 
    } 

    // the stroke 
    &:before { 
    width: 100px; 
    height: 2px; 
    background: crimson; 

    right: -100px; 

    transform-origin: 0 0; 
    transform: rotate(-20deg); 
    } 

    // the tooltip itself 
    &:after { 
    content: attr(title); 
    color: #fff; 

    top: -30px; 
    right: -250px; 

    width: 150px; 
    padding: 5px; 
    background: #000; 
    } 

    // when hover the item, 
    // display before and after 
    &:hover { 
    &:before, 
    &:after { 
     display: inline-block; 
    } 
    } 
} 

https://jsfiddle.net/808443bt/