dongquming3255
dongquming3255
2010-07-28 20:44

悬停在文本上时显示工具提示

How would I go about displaying a tooltip when the user hover overs some text? These text are keywords. I don't want to manually add these tooltip for each keywords. I am looking for a way to create a script of some sort to automatically do this either on the client side or server-side. When a user hovers over these keywords, and if the keyword exists in the database or an array it should retrieve the information from the database.

Please let me know if there are any good tutorials available on how to solve this problem.

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

5条回答

  • dongzhansong5785 dongzhansong5785 11年前

    There are many useful plugins to create nice tooltips.

    I know two of them that use the jQuery framework:

    You have to surround your keywords with a span element and a class to apply the jQuery selector. Maybe it's preferable to query for keyword presence server-side creating the ad-hoc html code for displaying the right tooltips, otherwise you have to create a tooltip in an AJAX way, handling the mouse hover event on the keyword.

    点赞 评论 复制链接分享
  • douzhi1924 douzhi1924 11年前

    You can also use YUI as an alternative to JQuery plugins. Here there is an example of what you want to do Simple Tooltip Example with YUI

    点赞 评论 复制链接分享
  • dsa88885555 dsa88885555 11年前

    Use the jQuery tooltip plugin, which can be found here.

    Code looks like:

    $("img[title]").tooltip()
    
    点赞 评论 复制链接分享
  • douxian3170 douxian3170 11年前

    There is a very popular Jquery Plugin "Beauty Tips" for this:

    http://www.lullabot.com/files/bt/bt-latest/DEMO/index.html

    Example of Beauty Tips with options:

    $('#example3').bt({
      contentSelector: "$(this).attr('href')",
      fill: 'red',
      cssStyles: {color: 'white', fontWeight: 'bold'},
      shrinkToFit: true,
      padding: 10,
      cornerRadius: 10,
      spikeLength: 15,
      spikeGirth: 5,
      positions: ['left', 'right', 'bottom']
    });
    
    点赞 评论 复制链接分享
  • dongliyi967823 dongliyi967823 6年前

    You might consider using the HTML Global title Attribute. If you're looking for something simple that's already built in to HTML (and thus usable in PHP without addins) then that would be my go-to solution. I'm considering it's use in a project myself.

    点赞 评论 复制链接分享