CODEWITHSUNDEEP
jqueryhtmlcss
trying_hal9000
trying_hal9000

Reputation: 4403

Jquery css : what's the difference between these two types of hover text

total jquery newb here and I'm wondering what the difference in therse two types of text that appear when you hover over something and if someone can explain what both of them are, thank a lot.

First hover text : when you hover over the up-vote or down-vote here on stackoverflow you will see two different messages that appear in a yellow box.

Second hover text:

https://twitter.com/#!/BRAINFEEDER

when you hover over a recommended person's image or hover over the small circles to the right of the 'Follow' button, a black box appears with a small triangle and describes what you are hovering.

Really appreciate any information thanks again

Upvotes: 0

Views: 949

Answers (2)

sandeep
sandeep

Reputation: 92803

In stackoverflow when you hover over the voted arrow is called a tooltip which is generated by default browser's for this we use title write this:

<a title="This question shows research effort; it is useful and clear (click again to undo)">up vote</a>

On the other like in twitter is a custom tooltip which your created with css & if you want some animation you can use javascript also.

Write like this:

html:

<a class="parent">
 <span class="tooltip">hello</span>
</a>

CSS:

.parent{
  display:block;
  position:relative;
}
.tooltip{
  display:none;
  position:absolute;
  top:-20px;
  left:-10x;
}
.parent:hover .tooltip{
 display:block
}

Upvotes: 1

albert
albert

Reputation: 8153

the hover effects you see on the stackoverflow vote up or down are tooltips; user agents style them and you can't alter them. they apply by default if you use a title attribute on an html element; when you hover over the element, the tool tip shows.

the hover effects you see on twitter when you look @ a user's icon, displaying their name, are styled with css and (i'm assuming) applied via JavaScript; there's not much to look at in the source, and inspect element doesn't show a title attribute on the a element or the img element.

Upvotes: 0

Related Questions