Tooltip mouseover on specific word in a sentence

Hi, I was wondering whether there’s a correct way to mouseover only on the word “example” in the following line of code? It is currently working by calling the related javascript code to mouseover all the words after the closing span tag, but I’d like to confine the mouseover area to the word “example”… Thanks. Here’s the code: [code]

  • Let's begin by reviewing the pros and cons.Let's begin by + ing Example
  • [/code]

    ???

    More information would help.

    I would guess that a better way to target words would be to put those words in a targetable container using HTML and write JS that targets that container rather than using JS to target words that follow a specific container. Your expressed JS logic, and the absence of HTML containers, however “simple”, seems to be flawed, doesn’t it?

    In general, the less one relies on JS for styles that can be provided using basic HTML and CSS the more likely the web page is to render correctly for all users on all devices, IMO. In this case, it sounds like targeting an HTML container with a class such as “.actionme” would be better than targeting a tag to indirectly [fill in the action here] the words that follow the tag.

    It’s just that if there are 2 links quite close together on the page - one mouseover area overlaps the other, so selecting that other area means moving the mouse completely away from both areas, and then selecting the one you want. I suppose, in this case, my question was more about whether it’s possible to put a link inside a link, one overriding the other. But, in the tooltip css, I just used margin-top:-4.6em and the mouseover text appears far enough away. I suppose it’s a good enough solution. When I say a “correct way”, I mean html valid. I’d still like to be able to activate the mouseover on just one word though! Thanks

    You’ll need to provide us with a working demo for better answers as there are a number of things to consider depending on how you are actually accomplishing this :smile: .

    On one of the links I changed from this: [code]

  • With the aim of becoming an actor, I have decided to take acting classes With the aim of + ing Example
  • [/code] to this, which actually works as I want: [code]
  • ...that's the reason that..I'm not rich. That's the reason that I didn't buy a carExample
  • [/code]

    But when I try the same with other li tags, it doesn’t work. You can see an example of this In the link below. In the middle column, on the fourth link, “that’s the reason that” the mouseover works as I want, only on the word “example”, but in the link directly above it, the same kind of html doesn’t work.

    Hi,

    You can’t really change the anchor to 100% on hover because that changes the way the html is laid out and you get the jump.

    Use another method or set the element to 100% start wth.

    e.g.

    .tooltip a{
    width:100%;
    }
    
    1 Like

    I’m a bit confused. I can’t understand why this line of code works correctly:

    [code]

  • ...that's the reason that..I'm not rich. That's the reason that I didn't buy a car

    WORKING

  • [/code]

    But when I omit the word “reason” from the above “that’s the reason that”, the code doesn’t work, as below:

    [code]

  • ...that's the that..I'm not rich. That's the reason that I didn't buy a car

    STRANGE

  • [/code]

    But if I repeat the same line of code that does work correctly…it works and the html validates correctly, as shown in this link:
    http://profesornativo.com/connectors-backup.htm

    I explained that in my previous post and you are changing the structure of the html on hover by increasing the floated anchor to 100% and thus it moves to a new line and causes the jiggle effect.

    Inline content on the same line as a float is displaced to the right of the float if there is room. Once you increase the width of the float to 100% when hovered then there is no room and content that was at the right side flips to the left side and the float goes underneath the text and thus the position changes and triggers the html reformat resulting in a continuous jiggle of the content. That’s why when you add more text the float already goes to the next line and thus no jiggle.

    The structure of those lists is not very semantic and the use of the tooltip doesn’t seem consistent. You must follow a logical approach to avoid issues like these.:slight_smile: I would have used inline-block for the tooltip triggers instead of floats so that the link stays exactly in the text where it should be. The tooltip should then be positioned in relation to the tooltip trigger. however it will mean giving the actual tooltip a specific width and positioning may be awkward. the easiest approach is just to put the tooltip on its own line at the end of the text (just set it to display:block and don’t float it).

    Ok, I went for your more simple suggestion of putting the mouseover links on a separate line, and I’m happy with it. The only small thing was I tried to force some mouseover links to be on the same lines where they would have fit easily, using a whitespace:nowrap on some neighbouring li tags related to the “examples”, but it was very fiddly trying to get them positioned properly. This is the result:
    http://profesornativo.com/connectors-test.htm. Thanks!

    On second thoughts, I prefer to leave the page as it is now - better for smaller screens, etc… Thanks, I appreciate the help!
    www.profesor-nativo-ingles.com/connectors.htm

    This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.