Hi! I am trying to make a Title pop-up block on my url and I can only get 1 or the other to work at a time: colors or line breaks. Can someone help me get both to work at the same time please? I tried everything I can think of: title data-title rel and they all work for colors OR line breaks, not both. Also, this html is defined as a variable in php and simply having a line break in the code does not work either. Please help!
Difficult to say without seeing your code. Can you post it?
Thanks for the reply!
<a class="Link-Blue2" data-title="Account Info: 
User ID #: ' . $comment['acc_id'] . '
Real Name: ' . $comment['real_name'] . '
Display Name: ' . $comment['display_name'] . '
Email: ' . $comment['email'] . '
Role: ' . $comment['role'] . '
Total Comments: ' . $comment['num_comments'] . '
Click to view user comments and send email" style="font-size:15px;" href="commentbox/accounts.php">' . $comment['email'] . '</a>
css:
.Link-Blue2 {
font-size:14px;
text-decoration: none;
color: #0c7684;
}
.Link-Blue2:visited {
text-decoration: none;
color: #108797;
}
.Link-Blue2:hover {
text-decoration: none;
color: #00383F;
}
.Link-Blue2:active {
text-decoration: none;
color: #00383F;
}
[data-title]:hover:after {
opacity: 1;
transition: all 0.1s ease 0.5s;
visibility: visible;
}
[data-title]:after {
content: attr(data-title);
background-color: #00FF00;
color: #111;
font-size: 120%;
position: absolute;
padding: 1px 5px 2px 5px;
bottom: -1.6em;
left: 100%;
box-shadow: 1px 1px 3px #222222;
opacity: 0;
border: 1px solid #111111;
z-index: 99999;
visibility: hidden;
}
[data-title] {
position: relative;
}
It turned my code into a link so I am adding the code for my link so you can see it:
< a class="Link-Blue2" data-title="Account Info: 
User ID #: ' . $comment['acc_id'] . '
Real Name: ' . $comment['real_name'] . '
Display Name: ' . $comment['display_name'] . '
Email: ' . $comment['email'] . '
Role: ' . $comment['role'] . '
Total Comments: ' . $comment['num_comments'] . '
Click to view user comments and send email" style="font-size:15px;" href="commentbox/accounts.php">' . $comment['email'] . '< /a>
Hi there. When you post code it needs to be formatted. Three backticks on a new line before and after the code.
Thanks Gandalf. Looks like someone fixed it for me.
No help yet?
1 Like
I’m not sure how reliable this is but were you trying something like this?
You would probably be better off using a nested span and using normal html to achieve the effect rather than in a data attribute.
1 Like
Thank you soo very much! That works perfectly!!!
Kudos to you!! I can’t even thank you enough!!
1 Like
Hi!
That works on the website, but not in the admin control panel,
It interferes with this code for the data cell:
“overflow:hidden;”
I use that to hide the remaining characters of an email when it reaches the end of the cell. But, with this code, only the small corner of the big pop-up title block is visible, it does not extend beyond the end of the cell.
Any help would be greatly appreciated!
HI,
There is no overflow:hidden in your pervious code or in the demo above so I’d need to see a bigger chunk of the code you are using.
Can you copy my example and add it to a new codepen so I can see what else is going on (codepen is free and easy to sign up). Alternatively I’ll need some code that.replicates the problem you are trying to solve,
If you have that anchor inside another element (such as a table-cell) and you are hiding the overflow then the chances are that your pop up cannot be seen outside the size of that cell because that’s what overflow:hidden does; it hides everything outside.
Maybe you can truncate the text in some other way without affecting the anchor popup. I’d need to see the full structure to offer specific advice 
.
Thanks for the reply!
Here is my code, I have been trying different things all night, this is what I ended up with, trying to cut off the part of the email:
html & php:
<?php $email_data = 'Account Information:
User ID #: ' . $comment['acc_id'] . '
Real Name: ' . $comment['real_name'] . '
Display Name: ' . $comment['display_name'] . '
Email: ' . $comment['email'] . '
Role: ' . $comment['role'] . '
Total Comments: ' . $comment['num_comments'] . '
Click to view user comments and send email' ; ?>
<span class="contents-email-light">
<a class="Link-Blue2" style="font-size:15px;" data-title="<?=$email_data?>"
href="comments.php?acc_id=<?=$comment['acc_id']?>"><?php echo mb_strimwidth($comment['email'], 0, 10, "...", ENT_QUOTES)?></a>
css:
.Link-Blue2 {
font-size:14px;
text-decoration: none;
color: #0c7684;
}
.Link-Blue2:visited {
text-decoration: none;
color: #108797;
}
.Link-Blue2:hover {
text-decoration: none;
color: #00383F;
}
.Link-Blue2:active {
text-decoration: none;
color: #00383F;
}
[data-title]:hover:after {
opacity: 1;
transition: all 0.1s ease 0.5s;
visibility: visible;
}
[data-title]:after {
content: attr(data-title);
background-color: #000000;
color: #FFF;
font-size: 100%;
position: absolute;
padding: 8px 12px 8px 12px;
bottom: 1em;
left: 1em;
box-shadow: 1px 1px 3px #222222;
opacity: 0;
border: 1px solid #111111;
z-index: 99999;
visibility: hidden;
line-height: 140%;
white-space: pre;
border-radius: 14px;
}
[data-title] {
position: absolute;
}
quote=“chrisdugan1, post:12, topic:438030”]
, this is what I ended up with
[/quote]
Is that doing what you want now.
I’m flying blind here a little as I really only need the generated html from view source as I can’t generate my own php.
If you are having problems still then I;'ll need something like this to work on.
As long as it exhibits the problem you are trying to fix.
hello! Thanks again, yes I am trying to keep the email in the data cell, and make the pop-up over top of the other cells (it is only visible in that cell and gets hidden under all other cells)
Here is my current code:
<?php foreach ($comments as $comment): ?>
<?php $email_link1 = 'Account Info:
User ID #: ' . $comment['acc_id'] . '
Real Name: ' . $comment['real_name'] . '
Display Name: ' . $comment['display_name'] . '
Email: ' . $comment['email'] . '
Role: ' . $comment['role'] . '
Total Comments: ' . $comment['num_comments'] . '
Click to send email' ?>
<a class="Link-Blue" style="font-size:15px;" data-title="<?=$email_link1?>" class="Link-Blue" href="mailto:<?=$comment['email']?>"><?=$comment['email']?></a>
[data-title]:hover:after {
opacity: 1;
transition: all 0.1s ease 0.5s;
visibility: visible;
}
[data-title]:after {
content: attr(data-title);
background-color: #000000;
color: #FFF;
font-size: 18px;
font-weight: 500;
position: absolute;
padding: 8px 12px 8px 12px;
bottom: 1em;
left: 1em;
box-shadow: 1px 1px 3px #222222;
opacity: 0;
border: 1px solid #111111;
z-index: 99999;
visibility: hidden;
line-height: 140%;
white-space: pre;
border-radius: 14px;
}
[data-title] {
position: absolute;
}
Where is the html for the cells you mention?
Are these cells in an html table or some other sort of construct?
I can’t really answer the question as I need to know the structure as stacking elements depends on the closest positioned ancestor. If that has a z-index then the child becomes confined to that context and will not overlap elements outside that context unless the parents z-index is higher.