html - Customizing default tooltip using css -
i know there lot of examples customizing tooltip of html element can't make working.
i have simple anchor looks following:
<a href="javascript:void(0)" class="tooltipitem" title="email address can used contact you." tabindex="-1" data-toggle="tooltip" data-placement="right">?</a>
and created following css style (i copied example):
a[title]:hover:after { content: attr(title); padding: 4px 8px; color: #333; position: absolute; left: 0; top: 100%; white-space: nowrap; z-index: 20px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 0px 0px 4px #222; -webkit-box-shadow: 0px 0px 4px #222; box-shadow: 0px 0px 4px #222; background-image: -moz-linear-gradient(top, #1111ee, #cccccc); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc)); background-image: -webkit-linear-gradient(top, #11eeee, #cccccc); background-image: -moz-linear-gradient(top, #eeeeee, #cccccc); background-image: -ms-linear-gradient(top, #eeeeee, #cccccc); background-image: -o-linear-gradient(top, #eeeeee, #cccccc); }
as can see in fiddle created, result not expect.
so, have change?
just make positioning of tag relative
a[title] { position: relative; }
that way tooltip absolute anchor tag, not document.
updated fiddle: https://jsfiddle.net/36kp45e2/2/
Comments
Post a Comment