Scroll dans le style title d'une div

Version imprimable

25/11/2013, 10h30
lyxthe

Scroll dans le style title d'une div

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:

<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
25/11/2013, 14h57
rodolphebrd

Bonjour,

pour votre exemple pourquoi ne pas personnaliser des tooltips avec les attributs data ?
25/11/2013, 15h29
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

Citation:

Envoyé par lyxthe

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

Oui je peux...

Code:

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

Code:

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