Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14
  1. #1
    New Coder
    Join Date
    Aug 2013
    Posts
    17
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Certain page content in tooltip

    Hello,

    Ive many content sites with informations (lika a database). I want to show certain informations (like the headline, description) in a tooltip. How can i do this?

    At the moment i have a MySQL database which contains the informations. With php echo i get them into the tooltip.

    Is this possible with javascript or how would you do that?

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    You can use JavaScript to *display* the tooltip. But you would need to get the CONTENT of the tooltips from the database and your would need to use PHP code to do that.

    I think you need to show us an example of what you have, for us to help your much more.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    New Coder
    Join Date
    Aug 2013
    Posts
    17
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Yeah i display the tooltip with javascript, but im searching another solution to get content informations into the tooltip (without php).


    I want the same solution like http://www.wowhead.com/tooltips has:

    They add a script in the head of the page:

    Code:
    <script type="text/javascript" src="http://static.wowhead.com/widgets/power.js"></script><script>var wowhead_tooltips = { "colorlinks": true, "iconizelinks": true, "renamelinks": true }</script>
    and with the link of the site you can see the informations in the tooltip:

    Code:
    <a href="http://www.wowhead.com/item=25697" class="q3">[Felstalker Bracers]</a>

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    You can do that, but you would still then need PHP to populate the contents of the ".js" file. Otherwise, you would have no flexibility in what the contents of the tooltips are.

    And pardon me, but that <a>...</a> you show there doesn't look like a tooltip to me.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,188
    Thanks
    10
    Thanked 569 Times in 550 Posts
    Quote Originally Posted by Old Pedant View Post
    And pardon me, but that <a>...</a> you show there doesn't look like a tooltip to me.
    that should be
    Code:
    <a href="http://www.wowhead.com/item=25697" class="q3" 
        rel="gems=23121&amp;ench=2647&amp;pcs=25695:25696:25697">[Felstalker Bracers]</a>
    where the rel attrib instructs the js on how to build a tooltip...
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/1/19) IE7:0.2, IE8:6.7, IE11:7.4, IE9:3.8, IE10:4.4, FF:18.3, CH:43.6, SF:7.8, MOBILE:27.5

  • #6
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,188
    Thanks
    10
    Thanked 569 Times in 550 Posts
    Quote Originally Posted by Holgo View Post
    Hello,

    Ive many content sites with informations (lika a database). I want to show certain informations (like the headline, description) in a tooltip. How can i do this?

    Is this possible with javascript or how would you do that?
    you can do it with just CSS and HTML. just print the tooltip html next to the handle html, and set a css :hover rule to show the bonus content when hovered.

    ex:

    Code:
    <style>
     .tip { position: relative; }
     .tip i{ position: absolute;  left: 5em; top: 1em;  width: 0px; overflow:hidden; background: #ffb; text-align: center;
          transition-property: width; transition-duration: 250ms; z-index: 99; box-shadow: 2px 2px 5px #222; }
     .tip:hover i { width: 200px; padding: 1em; border: 1px solid #444; border-top: 1em solid transparent; z-index: 9999; }
    
    </style>
    
    
    <p>
      <div class=tip>
        <i> hello <b>World1</b> </i>
        <h3>Headline grabber1</h3>
      </div>
    </p>
    
    <p>
      <div class=tip>
        <i> hello <b>World2</b> </i>
        <h3>Headline grabber2</h3>
      </div>
    </p>
    
    <p>
      <div class=tip>
        <i> hello <b>World3</b> </i>
        <h3>Headline grabber3</h3>
      </div>
    </p>
    while that is a little rough, all it needs is some css and more html to look like the linked page. a little javascript can make it even better, but we typically want to focus on the tooptip content display first, then fine-tune the behavior with script.

    a little history lesson:
    the only reason you needed javascript for "rollovers" was because IE3-6 didn't display css :hover rules correctly. born then were tons of tooltip scripts and the concept of using js for this task took hold. With the decent css coverage in IE7 not to mention 8+, there's no need for javscript to make tooltips.
    Last edited by rnd me; 09-17-2013 at 06:42 PM.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/1/19) IE7:0.2, IE8:6.7, IE11:7.4, IE9:3.8, IE10:4.4, FF:18.3, CH:43.6, SF:7.8, MOBILE:27.5

  • #7
    New Coder
    Join Date
    Aug 2013
    Posts
    17
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Tanks rnd me. I tried your answer and copy/paste your example. But there is no tooltip shown?

  • #8
    New Coder
    Join Date
    Aug 2013
    Posts
    17
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Sorry, had a little mistake. Your script is working. But now my question is how can i get a bit more complex container inside of the tooltip, like in the wowhead example.

  • #9
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,188
    Thanks
    10
    Thanked 569 Times in 550 Posts
    Quote Originally Posted by Holgo View Post
    Sorry, had a little mistake. Your script is working. But now my question is how can i get a bit more complex container inside of the tooltip, like in the wowhead example.
    you can copy their html and css. make sure it's ok. you really just need to apply a few a styles, most of the work will be creating the html that you need. since you are already making html from the DB info, just make more html next to the html you already have, using the CSS trick to hide/show the added markup.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/1/19) IE7:0.2, IE8:6.7, IE11:7.4, IE9:3.8, IE10:4.4, FF:18.3, CH:43.6, SF:7.8, MOBILE:27.5

  • #10
    New Coder
    Join Date
    Aug 2013
    Posts
    17
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hm, maybe i missunderstood you, but im not sure, if that is, what i need.

    Just to be sure were talking the same:

    Ive a normal content page with an html construct of an item like you see on that page
    (for example): http://www.wowhead.com/item=25697


    Now i want this specific html construct to be shown as a tooltip, but with an easy tooltip code. In this example you can get the tooltip with an easy link:

    Code:
    <a href="http://www.wowhead.com/item=25697">[Felstalker Bracers]</a>

  • #11
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,188
    Thanks
    10
    Thanked 569 Times in 550 Posts
    Quote Originally Posted by Holgo View Post
    Now i want this specific html construct to be shown as a tooltip, but with an easy tooltip code
    my code requires a few generic (copy+paste-able) rules to a stylesheet and one class to the html, i don't think anything out there will be easier.

    to move the info away from the html, onto another url, into a another format (json) and then require JS to scan the viewed page and upgrade the markup to build the same thing i showed you how to do in a single file makes it far more complex, not easy.

    the concept is the same as a "show more" feature. heck, you can use <details> to contain the tooltip, which will let it work on non-js browsers. you could still use CSS to hide the details' handle and trigger it on hover, but the markup is all the same.

    in short, unless you have the integration script like they have, and you have the info available as JSON like they have, you're looking at a ton more work to use their system instead of just producing better html that does exactly what you want.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/1/19) IE7:0.2, IE8:6.7, IE11:7.4, IE9:3.8, IE10:4.4, FF:18.3, CH:43.6, SF:7.8, MOBILE:27.5

  • #12
    New Coder
    Join Date
    Aug 2013
    Posts
    17
    Thanks
    1
    Thanked 0 Times in 0 Posts
    The problem is, i need to copy the tooltip content inside your code everytime?

    Example:

    I have a html construcht on a page:

    Code:
    <table class="iconlist">
    <tbody>
    <tr>
    <th align="right" id="iconlist-icon1">
    <div class="iconsmall"><ins style="background-image: url(http://example.com/images/wow/icons/small/inv_misc_bag_09_black.jpg);"></ins><del></del><a href="/item=23343"></a></div>
    </th>
    <td><span class="q1"><a href="/item=23343">Torn Pilgrim's Pack</a></span
    </td>
    </tr>
    </tbody>
    </table>
    So if i want to have this in a tooltip, do i have to copy this whole code inside your given code?

  • #13
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,188
    Thanks
    10
    Thanked 569 Times in 550 Posts
    Quote Originally Posted by Holgo View Post
    The problem is, i need to copy the tooltip content inside your code everytime?

    So if i want to have this in a tooltip, do i have to copy this whole code inside your given code?
    you need the tooltip content next to the item content.

    you copy my code into your page's head, and that's all you need to do, besides customizing the look.


    so, if you wanted to show the left cell and have the right cell be the tooltip, css like this should be the basis of your strategy:

    Code:
    .iconlist tr td { display: none; }
    .iconlist tr td:first-child,
    .iconlist tr:hover td { display: table-cell;}
    as shown, that will probably pretty jumpy, but the idea is that you define a tag around your item content and tooltip, be it <div class=tip>, <tr>, or whatever. you then style the tooltip to be hidden except when the surrounding tag is hovered upon.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/1/19) IE7:0.2, IE8:6.7, IE11:7.4, IE9:3.8, IE10:4.4, FF:18.3, CH:43.6, SF:7.8, MOBILE:27.5

  • #14
    New Coder
    Join Date
    Aug 2013
    Posts
    17
    Thanks
    1
    Thanked 0 Times in 0 Posts
    If i want to call this specific tooltipc content from another content page, this solution wont work, or am i wrong?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •