JSFiddle - React, Tailwind, and code Playground

by Talsja

HTML

<script src="https://unpkg.com/popper.js@1"></script>
<script src="https://unpkg.com/tippy.js@4"></script>
<script src="https://unpkg.com/[email protected]/dist/umd/tooltip.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/microtip/microtip.css">
<section class="datagrid">
	<table >
		<thead>
			<tr class="mvc-grid-headers">
				<th>First name</th>
				<th>Last name</th>
				<th>Job</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td class="truncate">Andrew</td>
				<td class="truncate"><a href="#">Fuller</a></td>
				<td class="truncate">UI & UX</td>
			</tr>
			<tr>
				<td class="truncate">Nancy</td>
				<td class="truncate"><a href="#">Davolio</a></td>
				<td class="truncate">Software Developer</td>
			</tr>
			<tr>
				<td class="truncate">Steven</td>
				<td class="truncate"><a href="#">Buchanan</a></td>
				<td class="truncate">Purchasing</td>
			</tr>			
		</tbody>


	</table>
</section>

CSS

// Table
.table > :not(caption) > * > * {
    padding: inherit;
    background-color: inherit;
    background-image: none;
    border-bottom-width:inherit;
}
.table{
	margin:0;
}
table {
	width: 100%;
	display: table;
	border-collapse: collapse;
	border-spacing: 0;
	border: none;
	position: relative;
	margin:0;

    &.striped {
        tr {
            border-bottom: none;
        }

        > tbody > tr:nth-child(odd) {
            background-color: #f9f9f9;
        }

        > tbody > tr > td {
            border-radius: 0;
        }
    }

    &.highlight {
        > tbody > tr {
            -webkit-transition: background-color .25s ease;
            -o-transition: background-color .25s ease;
            transition: background-color .25s ease;
        }

        > tbody > tr:hover {
            background-color: #f9f9f9;
        }
    }

    &.centered {
        thead tr th,
        tbody tr td {
            text-align: center;
        }
    }

    &.compact {
        th, td {
            padding: .25rem .9375rem;
        }
    }
}


.datagrid {
    padding: 0;
    line-height: inherit;
    font-size: inherit;
	overflow: hidden;
	
	 table {
        width: 100%;
        padding: 0;
        table-layout: fixed;

        th, td {
            border: none;
            position: relative;
            padding: .9375rem;
            display: table-cell;
            text-align: left;
            vertical-align: middle;
            border-radius: 0;

            &:first-child {
                padding-left: .75rem;
            }

            &:last-child {
                padding-right: .75rem;
            }
        }

        thead {
            border-bottom: 1px solid #ddd;

            tr {
                th {
                    font-size: .9em;
                    font-weight: 500;
                    color: #333;
                    cursor: pointer;
                    white-space: nowrap;
                    height: 56px;
                    vertical-align:...

JavaScript

const onMouseover = e => {
  let elem = e.target;
  console.log('onMouseover elem', elem)
  if(!elem.firstElementChild){
  	console.log('adding tooltip to this elem', elem)
    const tooltip = tippy(elem, {
      content: 'test',
    });
  }
}

document.addEventListener('mouseover', onMouseover);