i have display tooltip without hover , clicked.this example using keep open tooltip without hover or click not working.it displaying on hover.would please me in this?
html
<span class="field-tip"> keep open tooltip <span class="tip-content">lorem ipsum dolor sit amet, consectetur adipiscing elit. duis quis tellus ac lectus porta volutpat. </span> </span> css
/* hover tooltips */ .field-tip { position:relative; } .field-tip .tip-content { position:absolute; top:-10px; right:9999px; width:200px; margin-right:-220px; padding:10px; color:#000; background:#f9e79f; opacity:0; -webkit-transition:opacity 250ms ease-out; -moz-transition:opacity 250ms ease-out; -ms-transition:opacity 250ms ease-out; -o-transition:opacity 250ms ease-out; transition:opacity 250ms ease-out; border-radius: 10px; } .field-tip .tip-content:before { content:' '; position:absolute; top:50%; left:-16px; width:0; height:0; margin-top:-8px; border:8px solid transparent; border-right-color:#f9e79f; } .field-tip:hover .tip-content { right:-20px; opacity:1; }
.field-tip { position: relative; } .field-tip .tip-content { position: absolute; top: -10px; right: 9999px; width: 200px; margin-right: -220px; padding: 10px; color: #000; background: #f9e79f; opacity: 0; -webkit-transition: opacity 250ms ease-out; -moz-transition: opacity 250ms ease-out; -ms-transition: opacity 250ms ease-out; -o-transition: opacity 250ms ease-out; transition: opacity 250ms ease-out; border-radius: 10px; } .field-tip .tip-content:before { content: ' '; position: absolute; top: 50%; left: -16px; width: 0; height: 0; margin-top: -8px; border: 8px solid transparent; border-right-color: #f9e79f; } .field-tip .tip-content { right: -20px; opacity: 1; }<span class="field-tip"> keep open tooltip <span class="tip-content">lorem ipsum dolor sit amet, consectetur adipiscing elit. duis quis tellus ac lectus porta volutpat. </span> </span>- use
.field-tip .tip-content { right: -20px; opacity: 1; }remove:hover
Comments
Post a Comment