Joomla website designers and digital strategy

• Turning the Stick option 'On' or 'Off' will make all QLUE Tooltip's on your site stay on the screen until the user dismisses them. You can set individual Tooltip's to not be sticky if you so wish, how to do this can be seen in the Run section of this Tutorial. For this Tutorial we will leave it set to off.
• Specify whether or not you want the Tooltip to appear; where the 'Cursor' is positioned on the screen; or the 'Items' position on the screen. We will leave this at 'Item'
• Specify the global width of the Tooltip(This number is in Pixels). We will set ours to 350 but you can alter yours accordingly.
• Specify the global duration of the Tooltip. This can be altered using the syntax mentioned in the 'Run' section. We will set ours to 300.
• This is where you need to put your Custom Class name if you decide to alter the look of your QLUE Tooltip. For this demonstration, we will not have one and will use the default Tooltip look.
• Select whether the tooltip will appear in a Div or a Span tag. This can effect the look of your content when you embed QLUE Tooltip into your Joomla Website. We are going to set ours to Span, so we can include it in a paragraph.

Tooltip from a Span Tag?

If you need to display a Tooltip when the user is hovering over a Span Tag, this is the code that you'll need. Its the same as the Text one, but instead you must specify that this tooltip will be activated on a Span instead just a piece of text. Hover Here

{qluetip title=[Hover here to see tooltip] element=[span] } That'll be a Span Tag Tooltip! {/qluetip}

Tooltip from an Image?

Images can also be loaded with Tooltips. The code below shows how to add a Tooltip to an Image. The parameters image at the top of the page will display a tooltip for demonstration.

{qluetip title=[<img alt="Qlue" src="/images/image.png" />] } That'll be an Image Tooltip! {/qluetip}

Tooltip that will Stay on the screen?

If you require a Tooltip to stay on the screen and allow the user to close it manually, then this is the code for you. A Sticky Tooltip will display a normal tooltip in the same way as usual, but instead of disappearing, it will stay on the screen until the user dismisses it. Hover Here

{qluetip title=[Hover here to see tooltip] sticky=[1] } That'll be a Sticky Tooltip!{/qluetip}

Tooltip with a Module inside it?

Loading modules inside QLUE Tooltip is as easy as loading a Tooltip from Text. The code below shows what you need to include. You are able to specify whether this will be a Sticky tooltip or not. If you decide that you want to put text inside the Tooltip too, then you are able to do this too. Hover Here

{qluetip title=[Hover here to see tooltip] sticky=[1] mod=[login]} That'll be a Module Tooltip! {/qluetip}

Tooltip that behaves slower than others?

If you want the Tooltip to appear or disappear slowly, then the code below will help you. By increasing or decreasing the duration, this is how long it will take for the Tooltip to complete its action once the user has finished hovering. Hover Here

{qluetip title=[See How it Works] duration=[600]} That'll be a slow disappearing Tooltip! {/qluetip}

Tooltip that is bigger or smaller than others?

If you wish to adjust the width of an individual Tooltip, then the code below should help you. By altering the width number in the code below, you can exclusively change the width of certain Tooltips. Hover Here

{qluetip title=[See How it Works] width=[500]} That'll be a smaller Tooltip! {/qluetip}

Tooltip is styled the way that I want?

If you have experience with editing CSS then you will be able to alter the look of some or all of your QLUE Tooltip's. By using the code below you can load each Tooltip with a seperate CSS Class and add styling to them. If you wish to change the CSS style for all the Tooltips on your website, then add a Custom Class, as demonstrated in the Setup previously. Hover Here

{qluetip title=[Hover here to see tooltip] class=[cssClass]} That'll be a Custom Styled Tooltip! {/qluetip}

To override the default look of QLUE Tooltip, you will need to provide a Custom Class name, as mentioned in the 'Setup' tutorial above. Once you are aware of what Class name you entered, you can use the code to the right to begin changing the look of your QLUE Tooltip.

QTip-content

This will change the overall look of your Tooltip. You are able to override the heights and widths as well as alter colors and borders. Below are two examples using the code to the right, that change only the colors of the tooltips and not the sizes. Example 1

QTip-arrow

This will change the look of the Arrow that appears below the tooltip. If you wish to remove it, you are able to do so. The code and example demonstrate this working. If you wish to alter the look then you just need to provide a new image for the arrow and alter the CSS accordingly. Example

.qlue-customTooltipClass .QTip-content{
  overflow: hidden;
  background: #444;
  padding: 5px;
  width: 200px;
  height: 150px;
  color: #FAFBFC;
  border: 1px solid #E1E1E1;
  border-bottom: 5px solid #AFCA17;
}

.qlue-customTooltipClass .QTip-arrow{
  display: none;
}