PHP Link mouseover Title Colours

So I had a little play, and I got this effect:

1682346441018.png
1682346391221.png


You can see the php I played with here.

There's a codepen where you can see it in action here.

Just need to work out how to get the CSS into your site!
 
Last edited:
This would be the php to use:
PHP: 
            if ($smcFunc['db_affected_rows']() != 0)
            {
                //Loop Through Links Adding them to the list
                while ($row = $smcFunc['db_fetch_assoc']($dbquery))
                {
                    $arr_title = [];
                    $link_desc = $row['description'];
                    if (strlen($row['description']) != 0) $arr_title[] = $link_desc;
                    $link_added_by = $row['real_name'];
                    $arr_title[] = 'Added By: '.$link_added_by;
                    $link_hits = 'Visits: '.number_format($row['hits']);
                    $arr_title[] = $link_hits;
                    $link_title = implode('
', $arr_title);
                
                    //Get Each Row
                    $lst .= '  <span class="dw-link-wrapper">'.PHP_EOL.
                            '    <span class="dw-tooltip">'.PHP_EOL.
                            (strlen($link_desc) != 0 ? '      '.$link_desc.PHP_EOL : '').
                            '      Added&nbsp;By:&nbsp;<span style="color:#0000FF;">'.$link_added_by.'</span>'.PHP_EOL.
                            '      '.$link_hits.PHP_EOL.
                            '    </span>'.PHP_EOL.
                            '    <a '.
                                  'title="'.$link_title.'" '.
                                  'href="'.$scripturl.'?action=links;sa=visit&id='.$row['ID_LINK'].'" '.
                                  'rel="noopener" '.
                                  'target="_blank"'.
                                '>'.
                                  $row['title'].
                                '</a>'.PHP_EOL.
                            '  </span>, '.PHP_EOL;
                }
                If ($lst != '')
                    $lst =  $txt['Music_artist_sites_list'] . ' ' . rtrim($lst, ', '.PHP_EOL);
            }
      
            $smcFunc['db_free_result']($dbquery);
 
Hi @cheekybuddha This is part of a system I'm building on, Although I do use some Ezportal Blocks, I have created a CSS file which I load for that part of the system I.E. Artists.

Only just got on pc so will give it a go and let you know Thanks mick
 
My test site:

Taylor Swift Homepage

Taylor Swift Homepage
www.databasedreams.co.uk

That is really cool.
I commented Out the Title Line and added A table field for the colour

Hope it's not asking to much but would it be able to be moved where the original title was as the sections no longer being used

PHP: 
             if ($smcFunc['db_affected_rows']() != 0)
            {
                //Loop Through Links Adding them to the list
                while ($row = $smcFunc['db_fetch_assoc']($dbquery))
                {
                    $arr_title = [];
                    $link_desc = $row['description'];
                    if (strlen($row['description']) != 0) $arr_title[] = $link_desc;
                    $link_added_by = $row['real_name'];
                    $arr_title[] = 'Added&nbsp;By:&nbsp;'.$link_added_by;
                    $link_hits = 'Visits:&nbsp;'.number_format($row['hits']);
                    $arr_title[] = $link_hits;
                    $link_title = implode('&#013;', $arr_title);
                    $link_color = $row['online_color'];
                
                    //Get Each Row
                    $lst .= '  <span class="dw-link-wrapper">'.PHP_EOL.
                            '    <span class="dw-tooltip">'.PHP_EOL.
                            (strlen($link_desc) != 0 ? '      '.$link_desc.PHP_EOL : '').
                            '      Added&nbsp;By:&nbsp;<span style="color:'. $link_color .';">'.$link_added_by.'</span>'.PHP_EOL.
                            '      '.$link_hits.PHP_EOL.
                            '    </span>'.PHP_EOL.
                            '    <a '.
                                  //'title="'.$link_title.'" '.
                                  'href="'.$scripturl.'?action=links;sa=visit&id='.$row['ID_LINK'].'" '.
                                  'rel="noopener" '.
                                  'target="_blank"'.
                                '>'.
                                  $row['title'].
                                '</a>'.PHP_EOL.
                            '  </span>, '.PHP_EOL;
                }
                If ($lst != '')
                    $lst =  $txt['Music_artist_sites_list'] . ' ' . rtrim($lst, ', '.PHP_EOL);
            }
      
            $smcFunc['db_free_result']($dbquery);
 
Try adjusting the CSS like:
CSS: 
.dw-tooltip {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  color: black;
  background: #93f09e;
  padding: 0.3rem 2rem;
  border-radius: 0.3rem;
  top: calc(0.5rem + 100%);
/*   bottom: calc(0.5rem + 100%); */
  right: 50%;
  transform: translateX(85%);
}
 
Getting there :) Can't seem to move it down enough, as it's covering part of link.

Also, have been looking at making the text a little small But correct me if I'm wrong, I can use the span to resize The Text?

Also, If there is a Description, Can I change the width of the box?
 
Also tried adding this to the dw-tooltip, but it messes with the lines?

width: 225px;
 
Dreamweaver said:
Getting there :) Can't seem to move it down enough, as it's covering part of link.
Click to expand...
You missed the Top property declaration in the CSS (to replace the commented out Bottom property)

Also, have been looking at making the text a little small But correct me if I'm wrong, I can use the span to resize The Text?
Click to expand...
Yes, you can style the span - I see you have set font-size:11px;

Also, If there is a Description, Can I change the width of the box?
Click to expand...
It should get wider with the text it contains
 
If you want the description to be a single line, try the following in the PHP:
Code: 
// ...
                   $link_desc = $row['description'];
                   $link_desc = str_replace(' ', '&nbsp;', $link_desc);
// ...
 
Didn't need the above replace.

Had to set the Title attribute like 'title="" '. As removing it messed with the new pop-up.

I can live with this action, If there is a longer description it won't add the 3rd line but tags it onto the Added by line, See images below

This is fantastic, thank you mick

2023-04-25 (2).png


2023-04-25 (1).png
 
Hi Mick,

Adjust this portion of your version of the code I suggested:
From:
PHP: 
// ...
                    $lst .= '  <span class="dw-link-wrapper">'.PHP_EOL.
                            '    <span class="dw-tooltip">'.PHP_EOL.
                            (strlen($link_desc) != 0 ? '      '.$link_desc.PHP_EOL : '').
                            '      Added&nbsp;By:&nbsp;<span style="color:'. $link_color .';">'.$link_added_by.'</span>'.PHP_EOL.
                            '      '.$link_hits.PHP_EOL.
                            '    </span>'.PHP_EOL.
                            '    <a '.
// ...
To:
PHP: 
// ...
                    $lst .= '  <span class="dw-link-wrapper">'.PHP_EOL.
                            '    <span class="dw-tooltip">'.PHP_EOL.
                            (strlen($link_desc) != 0 ? '      '.$link_desc.'<br>'.PHP_EOL : '').
                            '      Added&nbsp;By:&nbsp;<span style="color:'. $link_color .';">'.$link_added_by.'</span><br>'.PHP_EOL.
                            '      '.$link_hits.PHP_EOL.
                            '    </span>'.PHP_EOL.
                            '    <a '.
// ...
That way, the hits will be on a new line, even if the description is wide.
 
I've decided to remove the description as it was too problematic and didn't hold vital information.

All sorted now many thanks for your help
 
You must log in or register to reply here.

Similar threads

I
Display blob in php from table
Replies
13
Views
3,741
NauticalGent
NauticalGent

Users who are viewing this thread

Total: 1 (members: 0, guests: 1)
Back
Top Bottom