Shortcode include space in page

support
1

hi
i create a custom shortcode for include a tooltip in my content.
shortcode work but include space in my content


<style>
    .tooltip {
        position: relative;
        display: inline-block;
    }
    
    .tooltip .tooltiptext{
        visibility: hidden;
        width: 300%;
        font-size: 12px;
        background-color: rgb(57, 57, 57);
        border-radius: 3px;
        /* Position the tooltip */
        position: absolute;
        z-index: 1;
    }
    #toultiptitre
    {
        color: rgb(92, 78, 80);
        text-align: center;
        font-size: 20px;
    }
    #toultiptext
    {
        color: rgb(133, 127, 128);
        text-align: justify;
        padding-right: 15px;
        padding-left: 15px;
    }

    .tooltip:hover .tooltiptext {
        visibility: visible;
    }
    </style>

<div class="tooltip">{{ .Get "mytooltip" }}
  <div class="tooltiptext">

    <p id="toultiptitre"> {{ .Get "titre" }}  </p> 

    <p id="toultiptext">
    {{ .Get "texte" }}    
    </p>

</div>
</div>





voici mon {{< tooltip mytooltip="mon tooltip "  titre=" mon titre" texte="mon super texte de dingue mon super texte de dingue mon super texte de dinguemon super texte de dingue mon super texte de dingue" >}} il est trop bien !

Capture d’écran 2022-06-30 à 20.35.47

2

Start and end your template tags with {{- and -}} to strip whitespace before and after your tag, respectively.

Make sure to include the space, so curly, curly, dash, space. More here.

3

hi @2d

my problem comes from line jumping.
and {{- breaks my shortcode

4

I meant the tags in your shortcode, not where you call the shortcode in your content. You seem to include a lot of whitespace and line feeds in there.

If that doesn’t work, please post the actual output of the code vs what you want to be output (i.e. what gets rendered in your browser): it’s hard to figure out where your LF comes from if we can’t see the html…

5

hi @lijn

actually looking at my html code that is completely broken and awkward:/

<p>voici mon 
<style>
    .tooltip {
        position: relative;
        display: inline-block;
    }
    
    .tooltip .tooltiptext{
        visibility: hidden;
        width: 300%;
        font-size: 12px;
        background-color: rgb(57, 57, 57);
        border-radius: 3px;
         
        position: absolute;
        z-index: 1;
    }
    #toultiptitre
    {
        color: rgb(92, 78, 80);
        text-align: center;
        font-size: 20px;
    }
    #toultiptext
    {
        color: rgb(133, 127, 128);
        text-align: justify;
        padding-right: 15px;
        padding-left: 15px;
    }

    .tooltip:hover .tooltiptext {
        visibility: visible;
    }
    </style>

<div class="tooltip">mon tooltip 
  <div class="tooltiptext">

    <p id="toultiptitre"> mon titre </p> 

    <p id="toultiptext">mon super texte de dingue mon super dingue mon super texte de dinguemon super texte de dingue mon super texte de dingue </p>

</div>
</div>
 il est trop bien !</p>

      </div></div>
6

Ah yes, I see!

If it were me, I’d take the style out of the shortcode, just to make things easier. But I’m pretty certain you’ll be able to solve it now :slight_smile:

7

hi
i don’t hunderstand how i can change html error. :frowning: who is create by my shortecaode

9

What @lijn trying to explain to you is that you need to put your CSS outside your shortcode, your shortcode should look like that (not tested):

<div class="tooltip">{{- .Get "mytooltip" -}}
  <div class="tooltiptext">
    <p id="toultiptitre">{{ .Get "titre" }}</p> 
    <p id="toultiptext">
    {{- .Get "texte" -}}
    </p>
</div>
</div>

With the CSS somewhere else in a static or theme files.

As @lijn says, you should delete all the whitespaces and line feeds that are not necessary.

3 Likes
10

hi all

thank you i add my css in file style.css it’s OK but i have same problem.
my html is broken when i add my shortcode (

) look my page source code on shortcode code level :


  <div class="post-content"><div>
        <h1 id="hi-there">Hi there<a href="#hi-there" class="hanchor" ariaLabel="Anchor">&#8983;</a> </h1>
<p>salut 

<div class="tooltip">mon tooltip<div class="tooltiptext">

    <div id="toultiptitre">  mon titre </div> 

    <div id="toultiptext">mon super texte de dingue mon super dingue mon super texte de dinguemon super texte de dingue mon super texte de dingue</div>

</div>
</div>
 il est trop bien !</p>

      </div></div>
11

It’s difficult to suggest a solution without a repository, we need your Markdown source, the shortcode and eventually the result.

2 Likes