how to create a custom tooltip using title attribute without jquery - angularjs

Question

I want to create a tooltip as shown in pic. Value in title tag is coming from controller.
This is my table code:
<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=""><enter data></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)"><enter data></td>
</tr>
</tbody>
</table>
Can anyone help me how to provide a tooltip like this.

Answer 1

Something like this?
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=""><enter data></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)"><enter data></td>
</tr>
</tbody>
</table>

Answer 2

You could work with a :before :afterand do some manual positioning.
Using the :before as the stroke and the :after as the tooltip. You could create something like this.
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/