0

I want to add tooltip to the links of certain keywords but this i breaking

http://jsfiddle.net/mwu902g4/1/ example

I want to show tooltip on top off anchor. with text like search

CSS

.bubble:hover
{
position: relative;
width: 200px;
height: 45px;
padding: 0px;
background: #FFFFFF;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
border: #FFE34C solid 4px;
}

.bubble:after
{
content: '';
position: absolute;
border-style: solid;
border-width: 15px 16px 0;
border-color: #FFFFFF transparent;
display: block;
width: 0;
z-index: 1;
bottom: -15px;
left: 84px;
}

.bubble:before
{
content: '';
position: absolute;
border-style: solid;
border-width: 18px 19px 0;
border-color: #FFE34C transparent;
display: block;
width: 0;
z-index: 0;
bottom: -22px;
left: 81px;
}
Learning
  • 19,469
  • 39
  • 180
  • 373
  • 3
    Are you trying to build a custom tool-tip? I am not sure if I understood the question. If you are trying to build a custom tool-tip then you can have a look at [this answer](http://stackoverflow.com/questions/25214632/how-can-i-create-custom-tooltips-with-css-pseudoelements/25214884#25214884). – Harry May 11 '15 at 07:18
  • Yes, i want to show tooptip to user once they hover over the link with the message "search" inside the tooptip – Learning May 11 '15 at 07:21
  • Ok, in that case have a look at the answer that I had linked. You basically need to hide/display the pseudo-elements on hover and also add content to it (both are missing in your current code). – Harry May 11 '15 at 07:22
  • 1
    This should work.. Thanks – Learning May 11 '15 at 07:26
  • Always happy to help :) I am marking this as a possible duplicate for now. If that doesn't work, ping me and I will help re-opening this question. – Harry May 11 '15 at 07:28

0 Answers0