html圆圈里面问号,html,css实现问号提示信息

问题：如何使用html,css实现问号提示信息？不使用js

解决：使用hint.css或自己写

方法：

方法一：使用hint.css

http://kushagragour.in/lab/hint/

方法二：

css：#content{

background-color: #FFF;

border-radius: 4px;

padding: 40px;

margin: 0 auto;

max-width: 600px;

position: relative;

margin: 0 auto 100px;

}

.help-tip{

position: absolute;

top: 18px;

right: 18px;

text-align: center;

background-color: #BCDBEA;

border-radius: 50%;

width: 24px;

height: 24px;

font-size: 14px;

line-height: 26px;

cursor: default;

}

.help-tip:before{

content:'?';

font-weight: bold;

color:#fff;

}

.help-tip:hover p{

display:block;

transform-origin: 100% 0%;

-webkit-animation: fadeIn 0.3s ease-in-out;

animation: fadeIn 0.3s ease-in-out;

}

.help-tip p{

display: none;

text-align: left;

background-color: #1E2021;

padding: 20px;

width: 300px;

position: absolute;

border-radius: 3px;

box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);

right: -4px;

color: #FFF;

font-size: 13px;

line-height: 1.4;

}

.help-tip p:before{

position: absolute;

content: '';

width:0;

height: 0;

border:6px solid transparent;

border-bottom-color:#1E2021;

right:10px;

top:-12px;

}

.help-tip p:after{

width:100%;

height:40px;

content:'';

position: absolute;

top:-40px;

left:0;

}

参考：http://sc.chinaz.com/jiaobendemo.aspx?downloadid=1481591154771