PHP Link mouseover Title Colours (1 Viewer)

[cheekybuddha]

Perhaps you are using SimpleMachines?

 

[cheekybuddha]

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

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!

 

[cheekybuddha]

This would be the php to use:

            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);

 

[Dreamweaver]

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

 

[Dreamweaver]

My test site:

Log in

Log in

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

             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);
                    $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);

 

[cheekybuddha]

Try adjusting the CSS like:

.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%);
}

 

[Dreamweaver]

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?

 

[Dreamweaver]

Added this to the css

font-size: 10px;

 

[Dreamweaver]

Also tried adding this to the dw-tooltip, but it messes with the lines?

width: 225px;

 

[cheekybuddha]

Getting there Can't seem to move it down enough, as it's covering part of link.

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?

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?

It should get wider with the text it contains

 

[cheekybuddha]

If you want the description to be a single line, try the following in the PHP:

// ...
                   $link_desc = $row['description'];
                   $link_desc = str_replace(' ', ' ', $link_desc);
// ...

 

[Dreamweaver]

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

 

[cheekybuddha]

Hi Mick,

Adjust this portion of your version of the code I suggested:
From:

// ...
                    $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:

// ...
                    $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.

 

[Dreamweaver]

Cool thanks for you help will update tonight.

 

[Dreamweaver]

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

 

[cheekybuddha]