1

I have a scrips creating catalogues. It is prepared for localisation and it works. But there are "Hints" by "hover" explaining details. I would need to add line breaks on some points in these "pseudo tooltips". In my case <br>, "r\n\", and other standard line breakers don't work. I have in en.php:

<?php
/* English language configuration */
/* Version 2019-12-12 15:26 */
$lang = array (
'catalogue-hint' = 'REQUIRED Blablabla',
'another-hint' = 'OPTIONAL Blablabla',
...
'another_variable' = 'Blablabla');
?>
And the lang string is called in index.php

<div class="hint">
 <div class="tooltip">
  <span data-title="<?php echo $lang['catalogue-hint']; ?>">
   <img src="./css/images/hint.png" alt="Hint">
  </span>
 </div>    
</div>
<div class="label">
 <?php echo $lang['catalogue-name']; ?><span class="req"></span>
</div>

Using <br> results in:

REQUIRED <br> Blablabla

I want it:

REQUIRED
Blablabla

  • Does this answer your question? [PHP - how to create a newline character?](https://stackoverflow.com/questions/4238433/php-how-to-create-a-newline-character) – Obsidian Age Dec 18 '19 at 20:23
  • You might also find the [`nl2br()`](https://www.php.net/manual/en/function.nl2br.php) function helpful. – Obsidian Age Dec 18 '19 at 20:24
  • I have studied the _nl2br_ function. But I have not find a way how to use it in my language files. As above demonstrated, the lang file is actually an array of about 100 strings used within the whole script (forms, output subpages etc.). – Martin Sereday Dec 18 '19 at 20:30
  • @MartinSereday Don't use it in the language files, have normal newlines there but use it when you want to display in in the context of an HTML template. Also note that the array syntax is wrong in your example (`=` instead of `=>`). – Jeto Dec 18 '19 at 20:33
  • I don't know what is displaying your tool tips but `\n` only works in double-quotes `"`. – AbraCadaver Dec 18 '19 at 20:34
  • I have studied this function, but I have not found a way hot to use it in my script. The language files contain only one _$lang_ array with about 100 text strings ued by _echo_ in other scripts. So the `'catalogue-hint' = 'REQUIRED Blablabla',` called by `` shall result in (line 1) **REQUIRED** (line 2) Blablabla – Martin Sereday Dec 18 '19 at 20:35
  • I have uploaded all to my server at [link](https://cmsimple.sk/irw) In the first required label hint I placed the
    , in the second required label hint "\n". Have a look. In the second label hint the text is cut after "REQUIRED".
    – Martin Sereday Dec 18 '19 at 20:44
  • @Jeto: Replacing all `=>` to `=` broke the script entirely (blank screen). – Martin Sereday Dec 18 '19 at 20:53
  • @MartinSereday It's the opposite, the code you posted has `=`s. – Jeto Dec 18 '19 at 20:55
  • Is there a way to have at least the word "REQUIRED" shown e.g. red? – Martin Sereday Dec 18 '19 at 20:55
  • @Jeto: Ooops, wrong written here. Pardon. – Martin Sereday Dec 18 '19 at 20:56

1 Answers1

1

It is not about php. It is about html and css

First. Just put a plain line break into the values:

$lang = array (
'catalogue-hint' = "REQUIRED\nBlablabla", // note the doublequotes!!!
// or
'another-hint' = 'OPTIONAL
Blablabla',

Next, you need to edit your css file (or style block, makes the tooltip) and add to the .tooltip .... :hover::after (or whatever how it is in your css) the attribute

    white-space: pre; 

which will make the tooltip content to accept a preformatted text.

Also, I recommend escaping special symbols (quotes, < > etc) using e.g. htmlspecialchars:

        <span data-title="<?php echo htmlspecialchars($lang['catalogue-hint']);?>">

Complete working example (.php):

<html>
 <body>
  <style>
   .tooltip span {
    display: inline-block; 
    position: relative; 
   }
   .tooltip span:hover::after {
    content: attr(data-title); 
    position: absolute;
    left: 20%; top: 30%; 
    z-index: 1; 
    background: rgba(255,255,230,0.9);
    width: 120px;
    padding: 5px 10px;
    border: 1px solid #333; 
    white-space: pre; /* preformated text! */
   }
  </style>  
<?php
$lang = array (
 'catalogue-hint' => "REQUIRED\nBlablabla", // note the doublequotes!!!
);
?>
    <div class="tooltip">
        <span data-title="<?php echo htmlspecialchars($lang['catalogue-hint']);?>">
            <img src="./css/images/hint.png" alt="Hint">
        </span>
    </div>  
 </body>
</html>
AterLux
  • 4,566
  • 2
  • 10
  • 13
  • @ AterLux: Thank you extremly much :-) That's it. Any clue how the two words "REQUIRED/OPTIONAL" can be styled (font-weight, color)? – Martin Sereday Dec 18 '19 at 23:03
  • @MartinSereday I don't think it is possible using the `content` attribute. To print complex text formatting use a hidden element and JavaScript to show it. Or check this out: https://stackoverflow.com/questions/32265446/css-content-bold-single-word there is an example of how to create SVG content. – AterLux Dec 18 '19 at 23:25
  • Thank you for the hint. But finally I think that it is not worth to make such complicated tricks because of 5-6 words. – Martin Sereday Dec 18 '19 at 23:36