PHP Link mouseover Title Colours

Dreamweaver · Apr 21, 2023

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'] . '&#013;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

561414 · Apr 22, 2023

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.

Dreamweaver · Apr 22, 2023

561414 said:
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

plog · Apr 22, 2023

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.

Dreamweaver · Apr 22, 2023

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'] . 'Added By: ' : 'Added By: ') . $row['real_name'];

cheekybuddha · Apr 22, 2023

The popup showing the title when you mouse over an element is created by the browser and not style-able.

You would need to create your own pop up component in which you could style the content as you like. Would probably require some javascript however.

Actually, perhaps possible without js.

Better example linked from previous link

Dreamweaver · Apr 22, 2023

Thanks, @cheekybuddha Looks like It'll be staying as it is then.

cheekybuddha · Apr 22, 2023

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.

Dreamweaver · Apr 22, 2023

Sorry missed the links, thought they were part of your sig

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

Mick

Dreamweaver · Apr 22, 2023

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

561414 · Apr 22, 2023

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

cheekybuddha · Apr 22, 2023

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.

cheekybuddha · Apr 22, 2023

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

cheekybuddha · Apr 22, 2023

561414 said:
Let me start by saying I've never used dreamweaver, however, this line:

561414 said:
Note: I don't know how to configure the styles in dreamweaver, but there should be some way to do it.

Note, Mick's username is 'Dreamweaver', he didn't saying he was using Dreamweaver

Dreamweaver · Apr 22, 2023

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

561414 · Apr 22, 2023

cheekybuddha said:
Note, Mick's username is 'Dreamweaver', he didn't saying he was using Dreamweaver

Oh my, I must have speed read the post.

Dreamweaver · Apr 23, 2023

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"

cheekybuddha · Apr 23, 2023

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

Dreamweaver · Apr 24, 2023

Thanks The Output is on the artists homepages, An example page here:

Metallica Homepage

www.databasedreams.co.uk

cheekybuddha · Apr 24, 2023

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.

PHP Link mouseover Title Colours

Well-known member

Active member

Well-known member

Banishment Pending

Well-known member

AWF VIP

Well-known member

AWF VIP

Well-known member

Well-known member

Active member

AWF VIP

AWF VIP

AWF VIP

Well-known member

Active member

Well-known member

AWF VIP

Well-known member

AWF VIP

Users who are viewing this thread