Aceste coduri sper ca va sunt folositoare, le puteti folosi in personalizarea: CSS tooltip.
Demonstratie aici
Pasul 1. Intrati in Foaia de stil CSS
Panou de administrare > Afisare > Imagini si culori < Culori > Foaie de stil CSS
Pasul 2. Pentru a folosi codurile aveti nevoie si de putin HTML:
Demonstratie aici
Pasul 1. Intrati in Foaia de stil CSS
Panou de administrare > Afisare > Imagini si culori < Culori > Foaie de stil CSS
- Cod:
.uparrowdiv, .downarrowdiv, .leftarrowdiv, .rightarrowdiv{
width:600px;
min-height:40px;
background: black;
color:white;
padding:5px;
position:relative;
word-wrap:break-word;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
margin-bottom:2em;
}
.uparrowdiv:after{
content:'';
display:block;
position:absolute;
top:-20px;
left:30px;
width:0;
height:0;
border-color: transparent transparent black transparent;
border-style: solid;
border-width: 10px;
}
.downarrowdiv:after{
content:'';
display:block;
position:absolute;
top:100%;
left:30px;
width:0;
height:0;
border-color: black transparent transparent transparent;
border-style: solid;
border-width: 10px;
}
.leftarrowdiv:after{
content:'';
display:block;
position:absolute;
top:10px;
left:-20px;
width:0;
height:0;
border-color: transparent black transparent transparent;
border-style: solid;
border-width: 10px;
}
.rightarrowdiv:after{
content:'';
display:block;
position:absolute;
top:10px;
left:100%;
width:0;
height:0;
border-color: transparent transparent transparent black;
border-style: solid;
border-width: 10px;
}
Pasul 2. Pentru a folosi codurile aveti nevoie si de putin HTML:
- Cod:
<div class="uparrowdiv">
Ma cheama Soft Bot si am sageata sus
</div>
<div class="downarrowdiv">
Ma cheama Soft Bot si am sageata jos
</div>
<div class="leftarrowdiv">
Ma cheama Soft Bot si am sageata in stanga
</div>
<div class="rightarrowdiv">
Ma cheama Soft Bot si am sageata in dreapta
</div>