PHP Link mouseover Title Colours (1 Viewer)

Dreamweaver

Well-known member
Local time
Today, 08:29
Joined
Nov 28, 2005
Messages
2,466
I have been trying to change the colour of "$row['real_name']" Which Is the part of the link that pops up when you run the mouse over the link with a "title="' . $link_title . '""

Code:
$link_title = (strlen($row['description'])!=0 ? $row['description'] . '
Added By: ' : 'Added By: ') . $row['real_name'];

            //Get Each Row

            $lst .= '<a title="' . $link_title . '" href="' . $scripturl . '?action=links;sa=visit&id=' . $row['ID_LINK']  . '" rel="noopener" target="_blank">' . $row['title'] . '</a>, ';

Hope somebody can help an old boy out

All the best mick
 
Last edited:
Let me start by saying I've never used dreamweaver, however, this line:
Code:
$lst .= '<a title="' . $link_title . '" href="' . $scripturl . '?action=links;sa=visit&id=' . $row['ID_LINK']  . '" rel="noopener" target="_blank">' . $row['title'] . '</a>, ';
Appears to be php, perhaps you could add a class attribute to it like this?
Code:
$lst .= '<a class="myLinkClass" title="' . $link_title . '" href="' . $scripturl . '?action=links;sa=visit&id=' . $row['ID_LINK'] . '" rel="noopener" target="_blank">' . $row['title'] . '</a>, ';
And then create a rule in your stylesheet like this:
Code:
.myLinkClass:hover {
   color: orange;
}

Note: I don't know how to configure the styles in dreamweaver, but there should be some way to do it.
 
Let me start by saying I've never used dreamweaver, however, this line:
Code:
$lst .= '<a title="' . $link_title . '" href="' . $scripturl . '?action=links;sa=visit&id=' . $row['ID_LINK']  . '" rel="noopener" target="_blank">' . $row['title'] . '</a>, ';
Appears to be php, perhaps you could add a class attribute to it like this?
Code:
$lst .= '<a class="myLinkClass" title="' . $link_title . '" href="' . $scripturl . '?action=links;sa=visit&id=' . $row['ID_LINK'] . '" rel="noopener" target="_blank">' . $row['title'] . '</a>, ';
And then create a rule in your stylesheet like this:
Code:
.myLinkClass:hover {
   color: orange;
}

Note: I don't know how to configure the styles in dreamweaver, but there should be some way to do it.
Thanks, But I'm only trying to change part of the title text (the member's name), Using CSS would work but would change the whole title.

Thanks for your help
 
I have been trying to change the colour of...
... I'm only trying to change part of the title text

Your first post you are trying to achieve a mouse over effect, your second post you are now trying to change text on the screen?

561414 gave the correct answer to your initial post. If you want to achieve a mouse over effect on a web page CSS is the way to do it.
 
Please reread first and reply I STATE I am trying to only change PART of the title element I.E. "$row['real_name']"

I have been trying to change the colour of "$row['real_name']" Which Is the part of the link that pops up when you run the mouse over the link with a "title="' . $link_title . '""

Thanks, But I'm only trying to change part of the title text (the member's name)

I.E.
$link_title = (strlen($row['description'])!=0 ? $row['description'] . '&#013;Added By: ' : 'Added By: ') . $row['real_name'];
 
Did you see the second link I posted?

It's not difficult to create the html in your php code and add the css to your css file.


Scratch that, it will be difficult to add a specific span for your real_name with separate styling using the content property in css.
 
Last edited:
Sorry missed the links, thought they were part of your sig

I did try using <p Color:###></P> It, didn't like that

Mick
 
I am thinking of maybe creating a tag for that section of the element, so the CSS can find it, I.E.

[id=member]real_name[/id] but then I have the problem of removing the tags I'm still new to PHP and know less of CSS or Java

Mick
 
As plog says, CSS is the way to do it, you don't necessarily need to use JavaScript. Browser tooltips can not be customized. You could add a custom data-* attribute to the <a> tag like <a data-custom="something" ... > and target that with css like this:
Code:
[data-custom]:hover:after {
    content: attr(data-custom);
    padding: 4px 8px;
    color: #fff;
    background-color: #000;
    position: absolute;
    z-index: 1;
}
 
The problem still remains that the OP wishes to style only a portion of the text within your attr(data-custom) which is not possible using that direct method.

You will need extra elements (eg spans) which can be styled within the tooltip, which is not possible using the ::before pseudo-element content property.

This way, you may as well just use the default title.
 
You should be able to do it with code like:
PHP:
// ...
    $link_title = strlen($row['description']) != 0
      ? $row['description'] . "\r\nAdded By: "
      : 'Added By: '
    ;
    $link_added_by = $row['real_name'];

    //Get Each Row
    $lst .= '<div class="link-wrapper">'.PHP_EOL.
              '<span class="tooltip">'.PHP_EOL.
                $link_title.
                '<span class="text-red">'.$link_added_by.'</span>'.PHP_EOL.
              '</span>'.PHP_EOL.
              '<a '.
                'title="'.$link_title.$link_added_by.'" '.
                'href="'.$scripturl.'?action=links;sa=visit&id='.$row['ID_LINK'].'" '.
                'rel="noopener" '.
                'target="_blank"'.
              '>'.
                $row['title'].
              '</a>'.PHP_EOL.
            '</div>';

Then, add to your css:
CSS:
.link-wrapper {
  position: relative;
}
.tooltip {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  color: #fff;
  background: #555;
  padding: 0.3rem 2rem;
  border-radius: 0.3rem;
  bottom: calc(0.5rem + 100%);
  right: 50%;
  transform: translateX(50%);
}
.link-wrapper:hover > .tooltip {
  visibility: visible;
  opacity: 1;
  transition-property: opacity;
  transition-duration: 0.2s;
  transition-timing-function: ease-in-out;
  transition-delay: 0.3s;
}
.text-red {
  color: red
}
(Untested of course!!)
 
Thanks @cheekybuddha not on my pc at the moment might not be able to work on it until monday evening unless the misses wants me out the way tomorrow lol
 
Well been a good boy all day, so she let me on PC lol

I have made a change to the original code, I posted don't think it will affect anything New code below I'll update test site with your code
tomorrow evening.

PHP:
    if ($smcFunc['db_affected_rows']() != 0)
    {
        //Loop Through Links Adding them to the list
        while ($row = $smcFunc['db_fetch_assoc']($dbquery))
        {
           
            $link_title = (strlen($row['description'])!=0 ? $row['description'] . '&#013;Added By: ' : 'Added By: ') . $row['real_name'] . '&#013;Visits: ' . number_format($row['hits']);
           
            //Get Each Row
            $lst .= '<a title="' . $link_title . '" href="' . $scripturl . '?action=links;sa=visit&id=' . $row['ID_LINK']  . '" rel="noopener" target="_blank">' . $row['title'] . '</a>, ';
        }
        If ($lst != '')
            $lst =  $txt['Music_artist_sites_list'] . ' ' . rtrim($lst, ", ");
    }

    $smcFunc['db_free_result']($dbquery);

Plus the colours For member's name come from a field This will be $row['online_color'] I left if from original as was using a basic red to see if I could get it working The format of the online_color is: "#0000FF"
 
Last edited:
Looks like you're just making a comma separated list of links within some text, Mick.

Might have to adapt the code I offered minimally to get that effect. Will have a look tomorrow.

d
 
This should work I think:
PHP:
            if ($smcFunc['db_affected_rows']() != 0)
            {
                //Loop Through Links Adding them to the list
                while ($row = $smcFunc['db_fetch_assoc']($dbquery))
                {
               
                    $link_desc = $row['description'].
                      strlen($row['description']) != 0 ? '&#013;' : '';
                    $link_added_by = 'Added By: '.$row['real_name'].'&#013';
                    $link_hits = 'Visits: '.number_format($row['hits']);
                    $link_title = $link_desc.$link_added_by.$link_hits;
               
                    //Get Each Row
                    $lst .= '<span class="link-wrapper">'.PHP_EOL.
                              '<span class="tooltip">'.PHP_EOL.
                                $link_desc.
                                '<span style="color:#0000FF;">'.$link_added_by.'</span>'.PHP_EOL.
                                $link_hits.
                              '</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>, ';
                }
                If ($lst != '')
                    $lst =  $txt['Music_artist_sites_list'] . ' ' . rtrim($lst, ", ");
            }
     
            $smcFunc['db_free_result']($dbquery);
You will still need the css styles I posted above (except the text-red class).
Are you using EzPortal blocks to create this?
The EzPortal documentation seems to be rather lacking (!), but it seems you can add css styles in the block editor (??? - I have never used this software!)
Otherwise, you will have to inject a style block in to the page's head using php.
 
Last edited:

Users who are viewing this thread

Back
Top Bottom