Jump to content
Sign in to follow this  
velneo

How to modify tootltips width?

Recommended Posts

velneo    0
velneo

Hello everybody.

 

We are working on this Web: http://beta.visualms.com/

If you put mouse over the first four dotted words, it will shows a "bootstrap tooltips" at the bottom.

 

We want that the tooltips are more width, enough to keep the phrase in one line.

 

We are using this code:

<div class="span9" style="padding-left: 2%;">
<h1 class="headtitle-home">Somos un grupo tecnológico del sector del software empresarial con varias divisiones de negocio que comparten cuatro valores comunes: [pl_tooltip tip="Las personas trabajando a gusto damos lo mejor" position="bottom"]<span class="enlace-valor">personas</span>[/pl_tooltip],  [pl_tooltip tip="El 20 % de rentabilidad nos permite crear el futuro que queremos" position="bottom"]<span class="enlace-valor">rentabilidad</span>[/pl_tooltip],  [pl_tooltip tip="Evolucionamos en tecnologías para innovar en software" position="bottom"]<span class="enlace-valor">tecnología</span>[/pl_tooltip] y  [pl_tooltip tip="Diseñamos con estilo sencillo y agradable" position="bottom"]<span class="enlace-valor">diseño</a>[/pl_tooltip].</h1>
</div>

 

Thank you very much for you help.

David.

Share this post


Link to post
Share on other sites
catrina    103
catrina

In order to modify the tooltip width, you'll need to use CSS. Do you have FTP access to your site (that way, you can look into the appropriate file for the code you need to use in Custom CSS so you can overwrite the default)?


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
velneo    0
velneo

Thank you for the support catrina.

 

Yes I can access FTP my site, of course. My problem is that I don't know what file I need to modify because I can't see it with the inspector (only can I see the code when i have the mouse over, but I can't inspect it).

 

Thanks. Best Regards.

David.

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

Hi David,

 

Use the following:

 

 

div[class="tooltip-inner"] { }
  • Like 1

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
velneo    0
velneo

Hi David,

 

Use the following:

 

 

div[class="tooltip-inner"] { }

 

 

I found general tooltip styles, but not these.
 
It is perfect, works right, thank you very much Danny!!

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

No problem, happy to help.

  • Like 1

Please search our forums, before posting!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

  • Similar Content

    • thirdstonemedia
      By thirdstonemedia+
      I've been fighting with a resolution issue ? Want to use Flick Slider, the site looks great on my monitor but client says she can't see bottom of homes. I believe she's on an old PC using outdated browser/s ... but, she's important to me and I'd like to make this work, on her system. Without asking her adjust her own set-up. 
      I put the Flick Slider inside a container, here ::
      http://becauze.xyz/home-five
      Set the Height of Flick Slider to 50 Base ... I don't know how this works exactly ... there is a Base then a Min ... but, haven't adjusted the Min ::
      http://becauze.xyz/home-four/
      Tried using Splash Up, which presents the same issue (she can only see top of home) and she wants several images to rotate on Home page, so not sure this would work anyway ::
      http://becauze.xyz/
      I have tried going into Layout and making the width narrower, and that does make the site narrower, but the homes still don't display in full, on her system. Help ?

      Here are her screen grabs, both desktop and iPad  (dumped the chalkboard background).

      FInally, she said these look great ::
      http://www.sinclairaia.com/
      http://www.kristihanson.com/
      What am I doing wrong ?? Is there a better way to accomplish making the site look great on any resolution at any size ?
      Joanne
      (Longtime Pagelines-lover.)


    • wyo22ski
      By wyo22ski+
      Hello,
       
      I'm basically a designer and understand a little on how to change CSS, etc., so please excuse my ignorance...  I recently upgraded to the newest platform from the DMS and my old DMS theme no longer functions.  I'm trying to replace the image slider that my Horizon Photography Theme (Nick Haskins) had created.  The Impulse image slider seemed the closest to what I need, but there are problems.
      It seems the the Impulse section for sliding images defaults to the image width, no the height.  I can change the Impulse stage height and width, but this does nothing to the internal content.  For instance, if I change the height to 200 pixels, the image remains the full width and only shows a cropped section.  I would like the ability to change the Impulse height, and have the image height fit space. 
      I've put this custom CSS in, but again, this only controls the stage height of Impulse:
      .pl-sn-impulse .pl-impulse-cell .cell-wrap, .pl-impulse-container, .owl-stage-outer {
        width: 100%;
      }
       
      Any suggestions welcome.  Thanks 
    • ppotent
      By ppotent
      Any chance of a pagelines table plug-in coming? I know that the use of short codes and bootstrap can achieve this, but I can't seem to find any easy/visual editor way of doing this. There are table plug-ins around for wordpress, but honestly, they are pretty clunky. I'd pay for a tables plug-in, given how much I would use tables if I could.
       
       
    • GreyFoxWebDesign
      By GreyFoxWebDesign+
      Hi, so I have an issue that seems specific to iPhones.
      I have 2 "Menus" in a container both set to 6 columns (see image A) - I have added the classes .menuleft and .menuright
      When this gets to 768px and the mobile menu kicks in, both sections revert to 12 columns (or 100% width) so the 2 menus are stacked on top of each other. I want them to remain inline so that they look like image B - so need to control the section width.
      I have added the following CSS:
      .menuleft[class*='pl-col-'] {
        max-width: 22%;
        margin-left: 3%;
        padding-right: 0em;
        padding-left: 0em;
        float: left !important;
      }
      .menuright[class*='pl-col-'] {
        max-width: 74%;
        margin-right: 1%;
        padding-right: 0em;
        padding-left: 0em;
        float: left !important;
      }
      This works well for Android phones, on all online emulators and in Chrome mobile inspector, but does not seem to work on iPhones. I don't have an iPhone so it's very hard to test. Any help would be appreciated. The site is currently live at quitegoodcards.com.
      PS Is there a way to target the li items in the mobile menu toggle (image C) that does not effect the desktop li? There doesn't seem to be a separate class to apply.
      Thanks in advance



    • nandorj78
      By nandorj78+
      I checked the demo for the new bootstrap theme (http://themes.pagelines.com/bootstrap/) and I really liked the slider on it. I suppose it was not done using 'impulse' or 'flick slider', was it? How was it done?
×