Link to home
Start Free TrialLog in
Avatar of nmarano
nmarano

asked on

Limit Characters in Tooltips

Hello Experts-

Wondering if there is a way for me to only show the first 30 characters when using a tooltip?  I am using the following.....

<style>
/* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
}

/* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 220px;
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
 
    position: absolute;
    z-index: 1;
}

/* Show the tooltip text */
.tooltip:hover .tooltiptext {
    visibility: visible;
}
</style>

Open in new window


And this in my HTML....
<div class="tooltip"><a href="#scriptURL#" target="_blank">#scriptURL#</a>
  										<span class="tooltiptext">
                                    #scriptURL#</span>

Open in new window

SOLUTION
Avatar of Scott Fell
Scott Fell
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of nmarano
nmarano

ASKER

Thanks Scott!  Will give it a try
ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of nmarano

ASKER

Thank you guys for the assist here.  Both solutions worked, but I did use the ellipsis

Thanks
NIck
Thank you for following up
Avatar of nmarano

ASKER

Sorry Scott!  Should have closed this out a couple weeks ago.  Thanks again for the help