CODEWITHSUNDEEP
phpcsswordpress
user1071339
user1071339

Reputation:

message popup on mouse hover

I am developing a website in wordpress.There is a menubar at the header.Now what i want is ,when i hover the mouse over the menu item i should get a message popup .

enter image description here

in above case it should be "services at Umang" when mouse is placed over services menu item.

the following is the css code for mouse hover

    #access li a:hover 
    {
      text-decoration:underline;        
     }

Any one has idea regarding this?

Upvotes: 0

Views: 10831

Answers (5)

Madara's Ghost
Madara's Ghost

Reputation: 174957

Use the title HTML attribute. It would cause a popup to occur after hovering after a certain short amount of time.

It's also native and semantic.

Live Example

Upvotes: 1

Besnik
Besnik

Reputation: 6529

Use the title-attribute

<a href="#" title="Message">Hover!</a>

Or google for "jquery tooltip"

http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery

Upvotes: 1

Ricky
Ricky

Reputation: 373

try this

<element onmouseover="alert('text')">qwe</element>

or 

<element onmouseover="this.innerHTML='someText'"></element>

Upvotes: 1

Henrik Janbell
Henrik Janbell

Reputation: 1922

Set the li to position:relative, inside of it place another element (the popup-message) and give it position:absolute and display:none, and position it with left, top etc (like: left:10px;top:-50px;) to the position you want. Then set it to display at hover:

li:hover .popup-message {display:block;}

Upvotes: 0

Mateusz Rogulski
Mateusz Rogulski

Reputation: 7445

You can do it with some div which has position: absolute and then make sth like:

CSS

#access li a:hover #someAbsolutePositioningDiv
{
  display: block;    
  position: absolute;
  top: some value;
  left: some value;
}

#someAbsolutePositioningDiv
{
  display: none;
}

HTML

<ul id="access">
 <li>
   Text
   <div id="someAbsolutePositioningDiv">Some other text</div>
 </li>
</ul>

Upvotes: 0

Related Questions