Discussion :

[lyxthe]

Bonjour,

je voudrais savoir s'il est possible d'ajouter un ascenseur vertical dans le title d'une div (la fenêtre qui apparaît lorsque la souris s'arête sur l'emplacement de la div). Je ne trouve pas d'infos là dessus parce que tout le monde cherche à mettre du scrolling dans le titre de la page html, et du coup toutes les recherches que je fais tombent sur ces résultats qui ne me concernent pas

Je parle bien du title d'une div pas du title de la page html.

un exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<div title="Plein de blabla beaucoup beaucoup tant et si bien que ça sort de l'écran" >un truc</div>

si quelqu'un a des infos...

Merci
Lyxthe

[rodolphebrd]

Bonjour,

pour votre exemple pourquoi ne pas personnaliser des tooltips avec les attributs data ?

[lyxthe]

Bonjour,

tout d'abord merci pour votre réponse.

En l'occurrence je suis plutôt novice en HTML et j'avoue que j'obtiens ce que je cherche en faisant un peu de la "bidouille". Du coup je ne connais pas du tout ce dont vous parlez. Peut-être que cela pourrait être une bonne idée, je vais essayer de trouver ce dont il s'agit. Si vous pouvez m'en dire plus .... ?

Lyxthe

[rodolphebrd]

.. Si vous pouvez m'en dire plus .... ?
Lyxthe

Oui je peux...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<div data-tooltip="Plein de blabla beaucoup beaucoup tant et si bien que ça sort de l'écran">survolez le lien</div

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
body{
  margin:100px;
}
div{
    cursor:pointer;
    background:tomato;
    color:white;
    width:105px;
    padding: 6px;;
    position: relative; 
}
    [data-tooltip]:after {
    content: attr(data-tooltip);
    position: absolute;
    color: white;
    top: 30px;
    left: -26px;
    background: #0090ff;
    padding: 5px 15px;
    visibility: hidden;
    width:100px;
    height:100px;
    word-break:normal;
    overflow-x:hidden;
    overflow-y:scroll;
  }
[data-tooltip]:hover:after {
    visibility: visible;
  }

http://codepen.io/anon/pen/chkIE