How to use both jQuery and span class?

Question

I want the link number to change to a dot on hover and for a message to appear on hover and I've done it using jQuery and a spam class but I can't make them go together, only one will work at a time. This is my code for the jQuery:

(function($){
  $(document).ready(function(){
    $("a[title]").style_my_tooltips({
      tip_follows_cursor:false, 
      tip_delay_time:90, 
      tip_fade_speed:600, 
      attribute:"title"
    });
  });
})(jQuery);

The code for the title appearance:

#s-m-t-tooltip {
max-width:300px;
padding:6px 6px 6px 6px;
margin:20px 0px 0px 20px;
background: #fff;
border:1px solid #000;
font-family:arial;
font-size:10px;
letter-spacing:0px;
text-transform:uppercase;
color:#000;
z-index:999999999999999999999999999999999999;
}

the cove for the text change on hover:

.navi .dot { display: none; }
.navi:hover .link { display: none; }
.navi:hover .dot { display: inline; }

and the HTML:

<span class="navi">
<span class="link">
<a href="" title="Online Services">1</a></span>
<span class="dot">&bull;</span></span>

My problem is that the text changes from the one to the • but the message doesn't appear on hover, and if I make it so no text changes, the message appears so I know it isn't a problem with the message coding.

The fact that you're using a jQuery plugin to style to tool tips is significant. — JAL, Sep 21 '13 at 10:53
@frenchie who told you that?? That is wrong w3 lists no max-value and [this answer](http://stackoverflow.com/a/491105/183181) is probably most accurate when it comes to handling z-index values. — vol7ron, Sep 21 '13 at 16:06

BenM · Answer 1 · 2013-09-21T15:48:50.730

0

You need to put the title attribute on the "dot" span.

Example fiddle: http://jsfiddle.net/ZBdRu/

<span class="navi">
<span class="link">
<a href="" title="Online Services">1</a></span>
<span class="dot" title="Online Services">&bull;</span></span>

EDIT: As jsFiddle doesnt have your plugin module as part of it I've redone the fiddle for you to try with the plugin on your dev system http://jsfiddle.net/ZBdRu/1/. If this doesn't work then consider using jQuery UI tooltip instead. It's used by a lot more people, it easy and has plenty of support. http://jqueryui.com/tooltip/

edited Sep 21 '13 at 15:48

answered Sep 21 '13 at 10:51

BenM

4,218
2
31
58

but that way the "#s-m-t-tooltip" code doesn't affect what the "title" looks like? – user2801863 Sep 21 '13 at 12:18
It won't do on jsFiddle because your plugin isn't part of what is being called. I've redone the fiddle with a tweak to your jQuery which might work if you try it on your live system where you have the tooltip styling plugin. http://jsfiddle.net/ZBdRu/1/ – BenM Sep 21 '13 at 15:47

How to use both jQuery and span class?

1 Answers1