JSFiddle - React, Tailwind, and code Playground

by oilvier

HTML

<div class="has-tooltip">
    <div class="tooltip">
        <p><a href="#">Nom client</a>
        </p>
        <p> <a href="#">Nom client</a>

            <br>Tél: 01</p>
    </div>Client</div>
<br>
<div class="has-tooltip">
    <div class="tooltip">
        <p><a href="#">Nom client</a>
        </p>
        <p> <a href="#">Nom client</a>

            <br>Tél: 01</p>
    </div>Client</div>
<br>
<div class="has-tooltip">
    <div class="tooltip">
        <p><a href="#">Nom client</a>
        </p>
        <p> <a href="#">Nom client</a>

            <br>Tél: 01</p>
    </div>Client</div>
<br>
<div class="has-tooltip">
    <div class="tooltip">
        <p><a href="#">Nom client</a>
        </p>
        <p> <a href="#">Nom client</a>

            <br>Tél: 01</p>
    </div>Client</div>
<br>
<div class="has-tooltip">
    <div class="tooltip">
        <p><a href="#">Nom client</a>
        </p>
        <p> <a href="#">Nom client</a>

            <br>Tél: 01</p>
    </div>Client</div>

CSS

/* Reset */
 * {
    margin:0;
    padding:0;
}
body {
    padding:10px;
    font-family:Arial;
    font-size: 14px;
}
.has-tooltip {
    position: relative;
    display:inline-block;
    padding-right:15px;
}
    .tooltip {
        background:beige;
        padding:5px;
        box-shadow:0 0 2px 2px rgba(0, 0, 0, 0.5);
        position: absolute;
        left:-9999em;
        min-width:150px;
        white-space:nowrap;
    }

.has-tooltip:hover .tooltip {
    left:100%;
}