Auto-position CSS Tooltip according to element? -
i have built css tool tip:
css:
.help { position: relative } .help .help-text { display: none; background-color: #fdfcef; border: 1px solid #e8e5c1; border-radius: 4px; color: #333; font-size: 12px; font-weight: 400; padding: 5px; white-space: normal; position: absolute; z-index: 1000; box-shadow: 0 1px 3px 3px rgba(0, 0, 0, .05); transition: .3s ease; -webkit-transition: .3s ease; -moz-transition: .3s ease; -ms-transition: .3s ease; -o-transition: .3s ease; margin-left: 60px; margin-top: 12px; line-height: 1.2 } .help .help-text:after, .help .help-text:before { bottom: 100%; left: 50%; left: 13%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none } .help .help-text:after { border-color: transparent transparent #fdfcef; border-width: 8px; margin-left: -8px } .help .help-text:before { border-color: transition transition #e8e5c1; border-width: 10px; margin-left: -10px } .help:hover .help-text { display: block } .help-text { width: 185px } .help-icon { padding-left: 3px; color: #789cbf; font-size: .9em!important; vertical-align: 0!important; cursor: } .other { display: inline } p.inline { display: inline-block } .inline { display: inline-block } .box { font-size: .65em; color: #fff; background-color: #00cc4f; font-weight: 700; width: 97px; height: 18px; padding-top: 3px; margin-top: 5px; padding-bottom: 4px; text-align: center; font-family: 'open sans', sans-serif; cursor: } html:
<table border="1"> <col style="width:128px;" /> <col style="width:216px;" /> <col style="width:280px;" /> <thead> <tr> <th>4</th> <th>5</th> <th>6</th> </tr> </thead> <tbody> <tr> <td> <p class="inline">sample a</p><span class="help"><span class="fa fa-question-circle fa-lg help-icon"></span><div class="help-text">lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam.</div></span> <span class="help"><div class="box">sample box</div><div class="help-text">im ad minim veniam. bore et dolore magna aliqua. ut enim ad minim veniam.</div></span> <div>aaa</div> <div class="other">sample b</div><span class="help"><span class="fa fa-question-circle fa-lg help-icon"></span><div class="help-text">lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam. bore et dolore magna aliqua. ut enim ad minim veniam.</div></span> </td> <td> </td> <td><ul> <li class="inline">another sample: c</li> <span class="help"> <span class="fa fa-question-circle fa-lg help-icon"></span> <div class="help-text">lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam. bore et dolore magna aliqua. ut enim ad minim veniam.lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam.</div> </span> <li class="inline">yet great sample - d:</li> <span class="help"> <span class="fa fa-question-circle fa-lg help-icon"></span> <div class="help-text">r sit amet, consectetur adipiscing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam. bore et dolore magna aliqua. ut enim ad minim veniam.lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incididunt ut labore et dol ssssssssssssssss</div> </span> </ul> </td> </tr> </tbody> </table> as can see, each sample positioning comes out different.
i want positioned according element containing tip.
also, code practice? work on tablet well? or should modification?
also, better use java script based tool-tip? if so, closest current one?
change margin-left: 60px; margin-top: 12px; left: -15px; top: calc(100% + 5px);
i corrected syntax error having span direct child of ul
.help { position: relative } .help .help-text { display: none; background-color: #fdfcef; border: 1px solid #e8e5c1; border-radius: 4px; color: #333; font-size: 12px; font-weight: 400; padding: 5px; white-space: normal; position: absolute; z-index: 1000; box-shadow: 0 1px 3px 3px rgba(0, 0, 0, .05); transition: .3s ease; -webkit-transition: .3s ease; -moz-transition: .3s ease; -ms-transition: .3s ease; -o-transition: .3s ease; left: -15px; top: calc(100% + 5px); line-height: 1.2 } .help .help-text:after, .help .help-text:before { bottom: 100%; left: 50%; left: 13%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none } .help .help-text:after { border-color: transparent transparent #fdfcef; border-width: 8px; margin-left: -8px } .help .help-text:before { border-color: transition transition #e8e5c1; border-width: 10px; margin-left: -10px } .help:hover .help-text { display: block } .help-text { width: 185px } .help-icon { padding-left: 3px; color: #789cbf; font-size: .9em!important; vertical-align: 0!important; cursor: } .other { display: inline } p.inline { display: inline-block } .inline { display: inline-block } .box { font-size: .65em; color: #fff; background-color: #00cc4f; font-weight: 700; width: 97px; height: 18px; padding-top: 3px; margin-top: 5px; padding-bottom: 4px; text-align: center; font-family: 'open sans', sans-serif; cursor: }<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/> <table border="1"> <col style="width:128px;" /> <col style="width:216px;" /> <col style="width:280px;" /> <thead> <tr> <th>4</th> <th>5</th> <th>6</th> </tr> </thead> <tbody> <tr> <td> <p class="inline">sample a</p><span class="help"><span class="fa fa-question-circle fa-lg help-icon"></span><div class="help-text">lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam.</div></span> <span class="help"><div class="box">sample box</div><div class="help-text">im ad minim veniam. bore et dolore magna aliqua. ut enim ad minim veniam.</div></span> <div>aaa</div> <div class="other">sample b</div><span class="help"><span class="fa fa-question-circle fa-lg help-icon"></span><div class="help-text">lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam. bore et dolore magna aliqua. ut enim ad minim veniam.</div></span> </td> <td> </td> <td><ul> <li class="inline">another sample: c <span class="help"> <span class="fa fa-question-circle fa-lg help-icon"></span> <div class="help-text">lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam. bore et dolore magna aliqua. ut enim ad minim veniam.lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam.</div> </span></li> <li class="inline">yet great sample - d: <span class="help"> <span class="fa fa-question-circle fa-lg help-icon"></span> <div class="help-text">r sit amet, consectetur adipiscing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam. bore et dolore magna aliqua. ut enim ad minim veniam.lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incididunt ut labore et dol ssssssssssssssss</div> </span></li> </ul> </td> </tr> </tbody> </table>
Comments
Post a Comment