Tooltip für HTML Div

Question

Ich habe ein Html Div

<div>
  <label>Name</label>
  <input type="text"/>
</div>

und möchte einen Tooltip anzeigen wenn der benutzer mit der Mouse darüberfährt. Wie kann ich das machen?

Answer 1

Du kannst Pseudo Elemente benutzen.

<style>
[data-tooltip]::before {
    content: attr(data-tooltip);
    position: absolute;
    opacity: 0;

    /* customize */
    transition: all 0.15s ease;
    padding: 10px;
    color: #333;
    border-radius: 10px;
    box-shadow: 2px 2px 1px silver;
}

[data-tooltip]:hover::before {
    opacity: 1;

    /* customize */
    background: yellow;
    margin-top: -50px;
    margin-left: 20px;
}

[data-tooltip]:not([data-tooltip-persistent])::before {
    pointer-events: none;
}

div {
    border: 1px solid silver;
    background: #ddd;
    margin: 20px;
    padding: 10px;
}
</style>

<div>Ohne Tooltip</div>

<div data-tooltip="Dieser Tooltip verschwindet wenn man das Div verl&auml;sst.">
    <p>Lorem ipsum dolor sit amet consectetuer Vestibulum pulvinar consequat quis orci.</p>
</div>


<div data-tooltip="Dieser Tooltip ist anklickbar." data-tooltip-persistent="foo">
    <p>Lorem ipsum dolor sit amet consectetuer Vestibulum pulvinar consequat quis orci.</p>
</div>

Answer 2

Du kannst dem div ein "title" Attribut geben.

<div title="Ein Tooltip">
  <label>Name</label>
  <input type="text"/>
</div>