Thursday 15 April 2010

css - Position of Tooltip Bootstrap on Link with Icon -


I am using bootstrap and font-awesome for icons and I'm trying to add tooltips to them in the link , But the positioning on the link with the tooltip icon can not be correct. 

  #html & lt; Div class = "icon-head" & gt; & Lt; Ul & gt; & Lt; Li & gt; & Lt; A href = "https://www.facebook.com/" Data-origin-title = "tooltip at the top" data-placement = "top" rel = "tooltip" title = "" & gt; & Lt; I class = "icon-facebook" & gt; & Lt; / I & gt; & Lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Div & gt; # Css .con-head {status: relative; Margin: 0; Padding: 0; Text align: center; } .con-head I {font-size: 28px; Margin-left: 15px; Display: Inline-block; } .con-head ul {list-style: none is out; Margin-left: 7%; Padding: 0; Text align: center; } .Inter-head a {text-decoration: none; Display area; Color: # 34495e; Line-height: 30px; } .con-head a: hover {color: black; } .Key-head Lee (background: none; Background-size: 0 pixels; Cursor: indicator; Margin-top: 15px; Margin-down: 0 pixels; Margin-right: 7px; Padding: 0 pixels; Swim left; Display: Inline; } .con-head li: hover {color: black; Background: None; Background-size: 0 pixels; }   
 I need a tooltip display at the top of the icon.  
 OK, I can fix  margin  by adding to the style of  tooltip  like:  
  .tooltip.top {margin-top: -11px; Margin-left: 7px; }   
 But, it could break other tooltip status.  
 How can I determine the  margin  without the style of ? Tooltip ?   
 
 
  resolve   
  margin-left Remove  at  .inon-head i  and  margin-left: 12%;  to  .icon-head ul   
 thanks all.   

 








Posted by



at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)