Response title
This is preview!
Move this topic
SharePoint Online Disable all Webart Tooltips on a Page
in Using jQuery
•
2 years ago
Hello. The jQuery below disables the hyperlink attribute for all webparts on a SharePoint Online page when you hover over a ListView webpart title.
$(document).ready(function() {
$('.ms-webpart-titleText').each(function() {
var link = $(this).find('a');
if (link.length > 0)
$(this).text(link.text());
});
});
I also need to disable the tooltip that pops up when you hover over the webpart title. I've tried various javascript and jQuery functions and nothing seems to work. Any help is appreciated.
1
Replies(10)
Not knowing the rest of the html structure if this works:
$('.ms-webpart-titleText').each(function() {
var link = $(this).find('a');
if (link.length > 0)
$(this).text(link.text());
});
var link = $(this).find('a');
if (link.length > 0)
$(this).text(link.text());
});
For the first part of the issue.
Then something like:
$('.ms-webpart-titleText').each(function() {
var link = $(this).find('a');
var link = $(this).find('a');
$(link).parent().attr('title','');
if (link.length > 0)$(this).text(link.text());
if (link.length > 0)$(this).text(link.text());
});
Should solve the problem.
See:
for your specific document structure.
Jim
$(this).text(link.text());
});
$(this).text(link.text());
});
Leave a comment on coldfusionguy's reply
Thanks Jim. What you gave me here:
$(document).ready(function() {
$('.ms-webpart-titleText').each(function() {
var link = $(this).find('a');
$(link).parent().attr('title','');
if (link.length > 0)$(this).text(link.text());
$(this).text(link.text());
});
});
… made the actual webpart title disappear. I need the tool tip to disappear or just be inactive instead.
Here is a small section of the HTML. The text "Call Tech Support" is the tool tip text for this one web part that pops up. I don't want any tool tip to appear when I hover over the web part title.
<div id="MSOZoneCell_WebPartWPQ4" class="s4-wpcell ms-webpartzone-cell ms-webpart-cell-vertical-inline-table ms-webpart-cell-vertical ms-fullWidth " onkeyup="WpKeyUp(event)" onmouseup="WpClick(event)">
<div class="ms-webpart-chrome ms-webpart-chrome-vertical ms-webpart-chrome-fullWidth ">
<div class="ms-webpart-chrome-title" id="WebPartWPQ4_ChromeTitle">
<span title="Call Tech Support" id="WebPartTitleWPQ4" class="js-webpart-titleCell"><h2 style="text-align:justify;" class="ms-webpart-titleText"><a accesskey="W" href="%23%23%23" onepagenavigationaction="1"><nobr><span>DIS Testing</span><span id="WebPartCaptionWPQ4"></span></nobr></a></h2></span>
I had a javascript that worked before the migration to sharepoint online but it stopped working after the migration. Here it is:
<script type="text/javascript">
/* Disable Tooltip popups on Web Part Titles and Top Menu Bar items */
var tdObjects = document.getElementsByTagName("td");
var tdObject;
function DisableToolTips()
{
for (var i=1; i < tdObjects.length; i++ )
{
tdObject = tdObjects.item(i);
if (tdObject.title != '')
{
tdObject.removeAttribute('.title');
}
}
}
_spBodyOnLoadFunctionNames.push("DisableToolTips()");
</script>
Thanks in advance for any tips.
Leave a comment on dugutigi's reply
try this:
<!DOCTYPE html>
<html>
<head>
<script>
$(document).ready(function() {
$('.ms-webpart-titleText').each(function() {
$(this).parent().attr('title','');
var link = $(this).find('a');
if (link.length > 0)$(this).text(link.text());
});
});
</script>
</head>
<body>
<div id="MSOZoneCell_WebPartWPQ4" class="s4-wpcell ms-webpartzone-cell ms-webpart-cell-vertical-inline-table ms-webpart-cell-vertical ms-fullWidth " onkeyup="WpKeyUp(event)" onmouseup="WpClick(event)">
<div class="ms-webpart-chrome ms-webpart-chrome-vertical ms-webpart-chrome-fullWidth ">
<div class="ms-webpart-chrome-title" id="WebPartWPQ4_ChromeTitle">
<span title="Call Tech Support" id="WebPartTitleWPQ4" class="js-webpart-titleCell">
<h2 style="text-align:justify;" class="ms-webpart-titleText">
<a accesskey="W" href="%23%23%23" onepagenavigationaction="1">
<nobr>
<span>DIS Testing</span>
<span id="WebPartCaptionWPQ4"></span>
</nobr>
</a>
</h2>
</span>
</div>
</div>
</div>
</body>
</html>
//////////////////////////////////////////////////////////////////////////////////////////////////////////
so the code is ( including the <script> tag )
<script>
$(document).ready(function() {
$('.ms-webpart-titleText').each(function() {
$(this).parent().attr('title','');
var link = $(this).find('a');
if (link.length > 0)$(this).text(link.text());
});
});
</script>
Leave a comment on coldfusionguy's reply
- $(function() {
- $('.ms-webpart-titleText:has(a)').text(function() {
- return $(this).find('a').text();
- }).parent().removeAttr('title'); // Thanks Jim! [FIXED]
- });
Since the most important part of the "loop" is to change the text, I use the text method instead of the each method.
Since I added :has(a), I no longer have to test, and can remove the title attribute outside of the "loop".
If you are running some sort of tooltip enhancement code, you may need to do more than just remove the title attribute.
JΛ̊KE
Thanks to Jim for correctly knowing it’s in the parent!
Leave a comment on jakecigar's reply
<span title="Call Tech Support" <-- is where I see the title which renders as a tooltiip upon hover.
I see it as the parent of the <h2>
/////////////////////////////////
<span title="Call Tech Support" id="WebPartTitleWPQ4" class="js-webpart-titleCell">
<h2 style="text-align:justify;" class="ms-webpart-titleText">
<a accesskey="W" href="%23%23%23" onepagenavigationaction="1">
<nobr>
<span>DIS Testing</span>
<span id="WebPartCaptionWPQ4"></span>
</nobr>
</a>
</h2>
</span>
////////////////////////////////
Jim
he writes,"I need the tool tip to disappear " <--the code I added (one line) does exactly that.
Jim, You are absolutely correct!
https://jsfiddle.net/jakecigar/b1fs49d8/ is updated to use .parent()
- $(function() {
- $('.ms-webpart-titleText:has(a)').text(function() {
- return $(this).find('a').text();
- }).parent().removeAttr('title');
- });
JΛ̊KE
Leave a comment on coldfusionguy's reply
Your HTML is invalid. Even though it works!
An H2 is not supposed to be a child of a SPAN. A SPAN should only have the "phrasing" tags in it.
JΛ̊KE
Leave a comment on jakecigar's reply
Jake,
While the code you have written is more powerful and elegant I would still go with:
$('.ms-webpart-titleText').each(function() {
$(this).parent().attr('title','');
var link = $(this).find('a');
if (link.length > 0)$(this).text(link.text());
});
The reasons are as follows:
1. He is looking at code he already is familiar with.
2. He then sees one line added $(this).parent().attr('title','');
3. He is the one maintaining the code.
I am hoping he chooses mine:)
Jim
Jim and Jake … you both rock. Jim's code worked right away for me. For this particular script, I could not get Jakes version to work. I see that both work in jsfiddle … so I'm a rather perplexed as to why both don't work on my pages. This is what worked:
$(document).ready(function(){
$('.ms-webpart-titleText').each(function() {
$(this).parent().attr('title','');
var link = $(this).find('a');
if (link.length > 0)$(this).text(link.text());
});
});
The HTML here is out of the box SharePoint created HTML. If it's not written correctly, that's Microsoft doing it.
Thanks again for solving my problem!
Leave a comment on coldfusionguy's reply
It’s not a contest! You added a correct line of code to get the job done.
Mine is shorter, as usual!
JΛ̊KE
PS it’s better to call removeAttr than to set it to "".
Leave a comment on jakecigar's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to dugutigi's question