Tooltip in SP Block

[Skaty]

Hi, i have SP Block that shows first images (with link) specific boards like news. I wanna to ask, how can i make a little tooltip to show topic's title or the topic's content ?

like this.



can i integrate this mod ?
http://www.simplemachines.org/community/index.php?topic=336505.0

these are codes codes i'm using in SP block.

Code Select Expand

global $smcFunc, $scripturl;
$boards = array(2);
$request = $smcFunc['db_query']('', '
   SELECT t.id_topic, m.subject, m.body
   FROM {db_prefix}topics AS t
      INNER JOIN {db_prefix}messages AS m ON (m.id_msg = t.id_first_msg)
   WHERE t.id_board IN ({array_int:boards})
   ORDER BY t.id_topic DESC
        LIMIT {int:limit}',
   array(
      'boards' => $boards,
                'limit' => 25,
   )
);
$topics = array();
while ($row = $smcFunc['db_fetch_assoc']($request))
   $topics[] = array(
      'id_topic' => $row['id_topic'],
      'body' => $row['body'],
      'first_image' => preg_match_all('~\[img[^]]*\]([^]]*)\[\/img\]~i', $row['body'], $images) ? '<img src="' . $images[1][0] . '" alt="' . $row['subject'] . '" height="40" width="80" />' : '',
   );
$smcFunc['db_free_result']($request);
echo '
         <center><table>
            <tr>
               <td>
                  <marquee onmouseover="this.stop()" onmouseout="this.start()"  height="100%" scrollamount="0" scrolldelay="0" direction="left"  loop="infinite">
                  <table></center></tr>';
foreach ($topics as $topic)
   echo '
                        <td><div class="mansetyan">
                        <a href="', $scripturl, '?topic=', $topic['id_topic'], '.0"><font color=red size=1 ALIGN="Center" width="50">', $topic['subject'], '</font>', $topic['first_image'], '</a>
                         </td>';
echo '
                       
                     </table>
                  </marquee>
               </td>
         </tr></table></div>';

[TheListener]

Please use the support boards for the respective mods.

A better response may be found at www.simpleportal.net

[bosswhite]

Please use the support boards for the respective mods.

I understand what you are getting at Old Fossil, but you cannot start a new topic on that board so have to post into an existing one set up for the mod you are querying. Currently, there are 240 pages of posts for SimplePortal and new questions just get lost amongst the miriad of other stuff going on at the same time within the topic.

A better response may be found at www.simpleportal.net

I, personally have made a few posts on SP and never had a response. When I have pointed out that there is hardly ever anybody on that site it is suggested that a better response may be had from SMF!

I know you're all volunteers but please understand the plight of others seeking assistance.

[TheListener]

Currently, there are 240 pages of posts for SimplePortal and new questions just get lost amongst the miriad of other stuff going on at the same time within the topic.

have you tried to use the search?

I recently had to use the search myself to find the answer to an old question I once had which I needed the answer too.

Do you think people like having to answer the same question over and over?

REgarding the SP forum I visit there at least once a day if I have time.

[Skaty]

I ask this question in 5 support forums and a got 0 response. Still waiting for someone's idea. And also waiting my spanish translate from my friend and will ask it in spanish forums too.

Everyone love to say ''this is in wronge place'' ''use search'' ''i'm tired to answer same questions'' ''don't pm me for support you moron!'' ''you should read before open a topic'' ''these people try to help you for free'' ''pls don't waste our time for silly things''

just bla bla bla. i don't understand if you know the answer and you are here for support why is this attittude. Sorry for my engslih i can't express my self like a want.so if i'm being rude sorry again.

[Arantor]

Because there are many more people who want help than people who provide help, and we would rather spend time with the people who genuinely need help rather than the people who can't be bothered to spend a little bit of effort trying to help themselves.

Most things that come up have been already answered. Many times. Many many times in a lot of cases. It isn't fun answering the same question 100 times. In fact it gets downright irritating. Which is why we ask people to try and do something themselves and spend a little time themselves first.

[MrPhil]

If you know where the code is that outputs an <img> (or other, such as <a>) tag, you can add a title="text" to it. That will give you a browser-standard tooltip upon mouse hover. If you want something fancier, I think there is some code floating around somewhere to allow more ornate boxes and HTML formatting, using Javascript etc. That mod you asked about might be usable, at least as a starting point (it might need some modification to work with your current SMF and SP level).

As a starting point, the title text might be whatever you're using for the alt text for that button.

[Skaty]

If you know where the code is that outputs an <img> (or other, such as <a>) tag, you can add a title="text" to it. That will give you a browser-standard tooltip upon mouse hover. If you want something fancier, I think there is some code floating around somewhere to allow more ornate boxes and HTML formatting, using Javascript etc. That mod you asked about might be usable, at least as a starting point (it might need some modification to work with your current SMF and SP level).

As a starting point, the title text might be whatever you're using for the alt text for that button.

Thank you! i will try the standart tooltip and will keep continue to tring something fancier.

[Skaty]

Hello again everyone. i just find the codes i need but i can't entegrate them together. i tried something with preview part but every time i got errors. can anyone look at it a bit ?

This is the codes i use and want a little preview tooltip.

Code Select Expand


global $smcFunc, $scripturl;
$boards = array(2);
$request = $smcFunc['db_query']('', '
   SELECT t.id_topic, m.subject, m.body
   FROM {db_prefix}topics AS t
      INNER JOIN {db_prefix}messages AS m ON (m.id_msg = t.id_first_msg)
   WHERE t.id_board IN ({array_int:boards})
   ORDER BY t.id_topic DESC
        LIMIT {int:limit}',
   array(
      'boards' => $boards,
                'limit' => 25,
   )
);
$topics = array();
while ($row = $smcFunc['db_fetch_assoc']($request))
   $topics[] = array(
      'id_topic' => $row['id_topic'],
      'body' => $row['body'],
      'first_image' => preg_match_all('~\[img[^]]*\]([^]]*)\[\/img\]~i', $row['body'], $images) ? '<img src="' . $images[1][0] . '" alt="' . $row['subject'] . '" height="40" width="80" />' : '',
   );
$smcFunc['db_free_result']($request);
echo '
         <center><table>
            <tr>
               <td>
                  <marquee onmouseover="this.stop()" onmouseout="this.start()"  height="100%" scrollamount="0" scrolldelay="0" direction="left"  loop="infinite">
                  <table></center></tr>';
foreach ($topics as $topic)
   echo '
                        <td><div class="mansetyan">
                        <a href="', $scripturl, '?topic=', $topic['id_topic'], '.0"><font color=red size=1 ALIGN="Center" width="50">', $topic['subject'], '</font>', $topic['first_image'], '</a>
                         </td>';
echo '
                       
                     </table>
                  </marquee>
               </td>
         </tr></table></div>';



And this is another code and it has the tooltip and have to take it and entegrate to mine's.

Code Select Expand

<?php

//SETUP

$number_of_posts =5; // Kac konu gosermek istiyorsaniz 10 sayisini duzenleyin
$default_avatar = 'http://www.psvitaturkiye.com/forum/Themes/vivanto_20/images/athenea/no_avatar.png'; // Sitenizin avatar urelesini sizinkiyle degisin 'http://www.url.com/image.jpg'

//SETUP END
global $contex, $txt, $settings;
$array = ssi_recentTopics($number_of_posts, null, null, 'array');
echo '
<table class="side_class_row">';
foreach ($array as $post)
{
global $memberContext;
     loadMemberData($post['poster']['id']);
     loadMemberContext($post['poster']['id']);
echo '
 <tr>
<td class="side_class_replies">', $post['replies'], '</td>
           <td  class="side_class_new">';
               if (!empty($post['new']) )
                   echo'';
               else
                   echo'
                   <img src="' . $settings['lang_images_url'] . '/new.gif" class="new_posts" alt="new" />';
            echo'
           </td>
           <td></td>
    <td><div class="triangle-isosceles" id="a', $post['topic'], '" style="display: none">', $post['preview'], '</div>
                   <a href="'. $post['href']. '" target="_self" onmouseover="document.getElementById(\'a', $post['topic'], '\').style.display = \'block\'" onmouseout="document.getElementById(\'a', $post['topic'], '\').style.display = \'none\'">', $post['short_subject'], '</a>
            </td>
<td>';
           if (!empty($memberContext[$post['poster']['id']]['avatar']['href'])){
echo '<img src="' . $memberContext[$post['poster']['id']]['avatar']['href'] . '" width="30" height="30" alt="', $post['poster']['name'], '" />';
                   }            
           else {
echo '<img src="' . $default_avatar .'" alt="default_avatar" width="30" height="30" />';
               }
       echo'
           </td>
           <td></td>
    </tr>
       <tr>
           <td colspan="6"><p class="side_class_poster"><span class="floatleft">', $txt['replies'], '</span> ', $post['poster']['link'], ' </p><hr class="side_hr" /></td>
       </tr>';
}
echo '
   </table>
<style type="text/css">
.side_class_poster
{
    font-size:10px;
    margin: 0;
    padding: 0;
    text-align: right;
}
table.side_class_row hr
    margin: 0;
    padding: 0;
}
.side_class_row
{
    padding:4px;
    width: 100%;
}
td.side_class_replies
{
    text-align:center;
    width:3%;
}
td.side_class_new
{
    text-align:center;
    width:4%;
}
.triangle-isosceles {
   position: fixed;
   top: 300px;
   left: 400px;
   padding:15px;
   margin:1em 0 3em;
   color:#fff;
   max-width: 400px;
   border: 1px solid #222222;
   -moz-border-radius:10px;
   -webkit-border-radius:10px;
   border-radius:10px;
   -moz-box-shadow: 3px 3px 39px 2px #222222;
   -webkit-box-shadow: 3px 3px 39px 2px #222222;
   box-shadow: 3px 3px 39px 2px #222222;
   background: #2989d8; /* Old browsers */
   background: -moz-linear-gradient(top, rgba(41,137,216,0.9) 0%, rgba(30,87,153,0.9) 94%, rgba(30,87,153,0.9) 100%);
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(41,137,216,0.9)), color-stop(94%,rgba(30,87,153,0.9)), color-stop(100%,rgba(30,87,153,0.9)));
   background: -webkit-linear-gradient(top, rgba(41,137,216,0.9) 0%,rgba(30,87,153,0.9) 94%,rgba(30,87,153,0.9) 100%);
   background: -o-linear-gradient(top, rgba(41,137,216,0.9) 0%,rgba(30,87,153,0.9) 94%,rgba(30,87,153,0.9) 100%);
   background: -ms-linear-gradient(top, rgba(41,137,216,0.9) 0%,rgba(30,87,153,0.9) 94%,rgba(30,87,153,0.9) 100%);
   background: linear-gradient(top, rgba(41,137,216,0.9) 0%,rgba(30,87,153,0.9) 94%,rgba(30,87,153,0.9) 100%);
   }
</style>';
?>

[Chen Zhen]

This was resolved here: http://simpleportal.net/index.php?topic=12591.msg62832#msg62832

Code Select Expand


global $smcFunc, $scripturl;

/* Edit these variables */
$imageWidth = 80;
$imageHeight = 40;
$imageAmount = 5;
$boards = array(1,2);
$showText = false;
$showLinks = false;
$showDate = true;
$showPoster = true;
$maxChars = 150;
$authorText = 'Author: ';
$linebreak = '<hr />';

/* Do not edit below this line */

$count = 0;
$tooltipStyle = '
position: fixed;
    top: 300px;
    left: 400px;
    padding:15px;
    margin:1em 0 3em;
    color:#fff;
    max-width: 400px;
    border: 1px solid #222222;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
    -moz-box-shadow: 3px 3px 39px 2px #222222;
    -webkit-box-shadow: 3px 3px 39px 2px #222222;
    box-shadow: 3px 3px 39px 2px #222222;
    background: #2989d8; /* Old browsers */
    background: -moz-linear-gradient(top, rgba(41,137,216,0.9) 0%, rgba(30,87,153,0.9) 94%, rgba(30,87,153,0.9) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(41,137,216,0.9)), color-stop(94%,rgba(30,87,153,0.9)), color-stop(100%,rgba(30,87,153,0.9)));
    background: -webkit-linear-gradient(top, rgba(41,137,216,0.9) 0%,rgba(30,87,153,0.9) 94%,rgba(30,87,153,0.9) 100%);
    background: -o-linear-gradient(top, rgba(41,137,216,0.9) 0%,rgba(30,87,153,0.9) 94%,rgba(30,87,153,0.9) 100%);
    background: -ms-linear-gradient(top, rgba(41,137,216,0.9) 0%,rgba(30,87,153,0.9) 94%,rgba(30,87,153,0.9) 100%);
    background: linear-gradient(top, rgba(41,137,216,0.9) 0%,rgba(30,87,153,0.9) 94%,rgba(30,87,153,0.9) 100%);';

$request = $smcFunc['db_query']('', '
              SELECT t.id_topic, m.subject, m.body, m.smileys_enabled, m.id_msg, m.poster_time, m.id_member
              FROM {db_prefix}topics AS t             
              INNER JOIN {db_prefix}messages AS m ON (m.id_msg = t.id_first_msg)
              WHERE t.id_board IN ({array_int:boards})
              ORDER BY t.id_topic DESC
              LIMIT {int:limit}',
              array(
                'boards' => $boards,
                'limit' => 25,
              )
            );

$topics = array();
while ($row = $smcFunc['db_fetch_assoc']($request))
{
$body = $row['body'];
$row['body'] = strip_tags(strtr(parse_bbc($row['body'], $row['smileys_enabled'], $row['id_msg']), array('<br />' => ' ')));
if (!$showLinks)
$row['body'] = preg_replace('@(https?://([-\w\.]+)+(:\d+)?(/([\w/_\.]*(\?\S+)?)?)?)@', '[link]',$row['body']);

if ($smcFunc['strlen']($row['body']) > $maxChars)
$row['body'] = $smcFunc['substr']($row['body'], 0, $maxChars) . '...';

censorText($row['subject']);
censorText($row['body']);
        $row['body'] = preg_replace('/\s{2,}/',' ',html_entity_decode($row['body']));
        $row['body'] = wordwrap($row['body'], 60, "<br />\n", true);
$poster = ssi_fetchMember($row['id_member'], false);
$topics[] = array(
'id_topic' => $row['id_topic'],
'body' => $row['body'],
'subject' => $row['subject'],
'poster_id' => $showPoster ? ($authorText . $poster[$row['id_member']]['username'] . '<br />') : false,
'poster_time' => $showDate ? (date("F j, Y, g:i a", $row['poster_time']) . '<br />') : false,
'first_image' => preg_match_all('~\[img[^]]*\]([^]]*)\[\/img\]~i', $body, $images) ? '<img src="' . $images[1][0] . '" alt="' . $row['subject'] . '" style="height:'.$imageHeight.'px;width:'.$imageWidth.'px;" />' : '',
);
}
$smcFunc['db_free_result']($request);

echo '
<table style="width:100%;border:0px;text-align:center;">
<tr class="centertext">';

foreach ($topics as $key => $topic)
{
if ($topic['first_image'])
{
if ($showText)
$text = '<br />' . $topic['subject'];
else
$text = false;

if (!$topic['poster_id'] && !$topic['poster_time'])
$linebreak = false;

echo '               
<td style="font-size:11px;position:relative;">
<div id="tooltip', $key, '" style="display: none;',$tooltipStyle,'">
<span style="font-size:9px;position:relative;">', $topic['poster_id'], $topic['poster_time'], '</span>
', $linebreak, '
<span style="float:left;position:relative;">', $topic['body'], '</span>
</div>
<span  id="hotspot'.$key.'" onmouseover="document.getElementById(\'tooltip', $key, '\').style.display = \'block\'" onmouseout="document.getElementById(\'tooltip', $key, '\').style.display = \'none\'" style="text-align:center;">
<a href="'. $scripturl. '?topic='. $topic['id_topic']. '.0" style="text-decoration:none;">' . $topic['first_image'] . $text . '</a>
</span>
</td>';
$count++;
if ($count >= $imageAmount)
break;   
}             
}

echo '
</tr>
</table>';


.. topic marked as solved.

[Skaty]

Thanks again for Underdog.